/* ============================================================
   ASYLUM COFFEE — Design tokens
   Designer-friendly OKLCH so hue/chroma/lightness can be tuned
   in isolation. All brand colour decisions live in this file.
============================================================ */

/* Highway Gothic — sourced from /static/fonts/, served via the
   fingerprinted manifest. Used for display type (hero, section
   titles, product names) to give the bold sign-painter energy
   the brand pulls from. */
@font-face {
    font-family: "Highway Gothic";
    src: url("../../fonts/HWYGEXPD.TTF") format("truetype");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Highway Gothic Narrow";
    src: url("../../fonts/HWYGNRRW.TTF") format("truetype");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* Pixelity Condensed — pixel/8-bit display face. Used as an accent on
   the homepage ticker (and likely the values-strip numerals later). Keep
   usage tight: ticker, callouts, never body copy. */
@font-face {
    font-family: "Pixelity";
    src: url("../../fonts/Pixelity.woff2") format("woff2"),
         url("../../fonts/Pixelity.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand palette — OKLCH so designers can adjust hue/chroma/lightness
       without re-deriving sRGB hex values. */
    --cream:         oklch(96.9% 0.015 88);    /* page base */
    --cream-2:       oklch(92.1% 0.028 88);    /* card / wholesale fill */
    --ink:           oklch(16.5% 0.007 50);    /* primary text + dark sections */
    --ink-soft:      oklch(35.5% 0.014 50);    /* muted text */
    --coffee:        oklch(26.2% 0.047 38);    /* secondary accent (rarely used) */
    --pink:          oklch(67.4% 0.243 6);     /* primary brand accent */
    --pink-soft:     oklch(91.0% 0.056 4);     /* pink wash */
    --pink-deep:     oklch(55.0% 0.230 4);     /* high-contrast pink */
    --bean:          oklch(20% 0.04 35);       /* hero bean fill */
    --line:          oklch(16.5% 0.007 50 / 0.12);

    /* Semantic mapping — lets the rest of the codebase (auth pages,
       form helpers, flash alerts) inherit the brand without knowing
       individual token names. */
    --color-primary:        var(--pink);
    --color-primary-hover:  var(--pink-deep);
    --color-secondary:      var(--ink-soft);
    --color-success:        oklch(64% 0.16 145);
    --color-warning:        oklch(78% 0.16 80);
    --color-error:          oklch(58% 0.22 25);
    --color-info:           var(--pink);

    --bg-primary:    var(--cream);
    --bg-secondary:  var(--cream-2);
    --bg-tertiary:   var(--ink);

    --text-primary:    var(--ink);
    --text-secondary:  var(--ink-soft);
    --text-muted:      oklch(45% 0.012 50);

    --border-color:    var(--line);
    --border-radius:   0.5rem;
    --border-radius-lg: 1rem;

    /* Spacing */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;

    /* Typography */
    /* Display: Archivo Black (Google) is the new primary marketing display
       face — bolder and tighter than the previous Highway Gothic Expanded,
       which was wrapping hero headlines. Highway Gothic stays in the fall-
       back chain for any cached / offline render. */
    --font-display: "Archivo Black", "Highway Gothic", "Anton", system-ui, sans-serif;
    --font-display-narrow: "Highway Gothic Narrow", "Archivo Black", system-ui, sans-serif;
    --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;
    --font-pixel:   "Press Start 2P", "VT323", ui-monospace, monospace;
    /* Pixelity is a condensed pixel face — used only on accent elements
       (the homepage ticker, callouts). Keep it separate from --font-pixel
       so the values-strip numerals and other pixel callouts can stay on
       Press Start 2P without inheriting Pixelity. */
    --font-ticker:  "Pixelity", "Press Start 2P", ui-monospace, monospace;

    --font-size-sm:  0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:  1.125rem;
    --font-size-xl:  1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* Shadows */
    --shadow-sm:    0 1px 2px oklch(16.5% 0.007 50 / 0.12);
    --shadow-md:    0 8px 24px -8px oklch(16.5% 0.007 50 / 0.18);
    --shadow-lift:  0 20px 40px -20px oklch(16.5% 0.007 50 / 0.25);

    /* Layout */
    --container-max: 1400px;
    --pad-x:         20px;
    --nav-height:    62px;
}

@media (min-width: 640px) {
    :root { --pad-x: 28px; }
}

@media (min-width: 900px) {
    :root { --pad-x: 32px; --nav-height: 72px; }
}