/* ==========================================================================
   TasteLog website - design tokens

   Token names mirror TasteLog.UI/wwwroot/css/app.css, so the site and the
   product share one vocabulary: a colour changed in the app has an obvious
   counterpart here. Nothing outside this file hardcodes a colour, a font or a
   step on the type scale, which is what makes page two a copy-paste.
   ========================================================================== */

/* ----- Fonts (self-hosted latin subsets: no third-party request, so no
         visitor IP reaches a font CDN) ----- */

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/space-grotesk-700.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-500.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600.woff2") format("woff2");
}

/* ----- Dark (default) ----- */

:root {
    /* Paints native UI - scrollbars, form fields, the text caret - to match
       the page instead of assuming light. */
    color-scheme: dark;

    --tl-black: #111111;
    --tl-surface: #1a1a1a;
    --tl-surface-light: #242424;
    --tl-border: #333333;
    --tl-text: #e8e8e8;
    --tl-text-muted: #999999;
    --tl-heading: #ffffff;

    --tl-accent: #e06000;
    --tl-accent-hover: color-mix(in srgb, var(--tl-accent) 85%, black);
    --tl-accent-active: color-mix(in srgb, var(--tl-accent) 75%, black);
    --tl-on-accent: #ffffff;

    /* The brand orange is only 3.6:1 on the dark background, which is fine for
       a large filled button and fails for anything read as text. This lighter
       tint clears 4.5:1 and is the one to use for words. */
    --tl-accent-text: #f5913f;

    --tl-success: #3fb950;
    --tl-danger: #f85149;

    /* A warm bloom behind the hero: depth without an image to download. */
    --tl-glow: radial-gradient(60rem 32rem at 12% -8%,
        color-mix(in srgb, var(--tl-accent) 22%, transparent), transparent 65%);

    --tl-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.45);
}

/* ----- Light -----

   Not reachable today: the page ships dark, with no toggle and no
   prefers-color-scheme switch. Kept because the values are measured for contrast
   and match the app's light theme, so turning this on later is a one-line change
   rather than a redesign. Delete it if that day never comes. */

[data-theme="light"] {
    color-scheme: light;

    --tl-black: #f7f5f2;
    --tl-surface: #ffffff;
    --tl-surface-light: #efece7;
    --tl-border: #ded9d1;
    --tl-text: #2b2723;
    --tl-text-muted: #6b645c;
    --tl-heading: #17140f;

    --tl-accent: #e06000;
    --tl-on-accent: #ffffff;

    /* Same reasoning inverted: the brand orange is 3.3:1 on the light
       background, so words use a deeper shade of it. */
    --tl-accent-text: #a34500;

    --tl-success: #1a7f37;
    --tl-danger: #c62f2f;

    --tl-glow: radial-gradient(60rem 32rem at 12% -8%,
        color-mix(in srgb, var(--tl-accent) 14%, transparent), transparent 65%);

    --tl-shadow: 0 1px 2px rgb(23 20 15 / 0.06), 0 12px 32px rgb(23 20 15 / 0.10);
}

/* ----- Type ----- */

:root {
    --tl-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    --tl-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

    /* Fluid steps: each scales between a phone and a desktop rather than
       snapping at a breakpoint. */
    --tl-text-sm: 0.875rem;
    --tl-text-base: 1rem;
    --tl-text-lg: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
    --tl-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem);
    --tl-text-2xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
    --tl-text-3xl: clamp(2.35rem, 1.75rem + 2.6vw, 3.9rem);

    --tl-leading-tight: 1.06;
    --tl-leading-snug: 1.35;
    --tl-leading-normal: 1.65;

    /* Keeps prose at a readable measure however wide the window gets. */
    --tl-measure: 34rem;
}

/* ----- Space, shape, motion ----- */

:root {
    --tl-space-2xs: 0.25rem;
    --tl-space-xs: 0.5rem;
    --tl-space-sm: 0.75rem;
    --tl-space-md: 1rem;
    --tl-space-lg: 1.5rem;
    --tl-space-xl: 2.5rem;
    --tl-space-2xl: 4rem;
    --tl-space-3xl: 6rem;

    --tl-radius-sm: 0.5rem;
    --tl-radius-md: 0.75rem;
    --tl-radius-lg: 1.25rem;
    --tl-radius-pill: 999px;

    --tl-page-max: 68rem;
    --tl-page-gutter: clamp(1.25rem, 5vw, 3rem);

    --tl-transition: 150ms ease;
}