/* ==========================================================================
   Jaeger Template — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for the visual identity. Re-theme a project by
   editing this file only — components and base styles consume semantic
   tokens, never primitives directly.

   Two-tier system:
     1. Primitives — raw values (color ramps, scales). Stable.
     2. Semantic   — meaningful aliases (--color-bg, --color-accent, etc).

   Flamore — "Flamme & Eleganz": ink / paper / mist, one flame-yellow accent,
   Montserrat headings + Poppins body. Light only (no dark variant, brief).
   Dark surfaces (footer, header over photos, mobile nav, CTA band) re-point
   the semantic colour tokens locally via `.surface-dark` (components.css).
   ========================================================================== */

@layer reset, tokens, base, components, utilities;

@layer tokens {
  :root {
    /* ----------------------------------------------------------------
       1. PRIMITIVES — raw values
       ---------------------------------------------------------------- */

    /* Neutral ramp (zinc) */
    --zinc-50:  #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-300: #d4d4d8;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #18181b;
    --zinc-950: #09090b;

    /* Accent ramp (blue) — replace this ramp to re-brand */
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --blue-950: #172554;

    --white: #ffffff;
    --black: #000000;

    /* Flamore brand primitives */
    --ink:   #232323;            /* text, dark surfaces */
    --paper: #ffffff;            /* page */
    --mist:  #ededed;            /* section panels */
    --mist-strong: #e2e2e2;
    --stone: #6b6b6b;            /* muted text — live #9f9f9f darkened: 5.3:1 on paper, 4.7:1 on mist */
    --sand:  #f2e9e4;            /* warm off-white for leads on photos (live) */
    --flame: #ffd64f;            /* the one accent (CTA button) */
    --flame-hover: #f5c51f;
    --overlay-rgb: 10 8 6;       /* warm near-black for photo overlays — use as rgb(var(--overlay-rgb) / α) */
    --overlay: rgb(var(--overlay-rgb) / 0.6); /* photo overlay (hero, CTA band) */
    --ember:       #b42318;      /* form errors on paper (6.5:1) */
    --ember-light: #ffb4a8;      /* form errors on ink */
    --moss:        #1f7a4d;      /* success on paper */
    --moss-light:  #8fdcb2;      /* success on ink */

    /* Spacing — hybrid 4-then-doubling scale */
    --space-0:  0;
    --space-1:  0.25rem;   /*   4px */
    --space-2:  0.5rem;    /*   8px */
    --space-3:  0.75rem;   /*  12px */
    --space-4:  1rem;      /*  16px */
    --space-5:  1.5rem;    /*  24px */
    --space-6:  2rem;      /*  32px */
    --space-7:  3rem;      /*  48px */
    --space-8:  4rem;      /*  64px */
    --space-9:  6rem;      /*  96px */
    --space-10: 8rem;      /* 128px */
    --space-11: 12rem;     /* 192px */
    --space-12: 16rem;     /* 256px */

    /* Fluid type scale — clamp(min, fluid, max). Min hits ~360px viewport,
       max hits ~1280px viewport. Smooth ramp in between. */
    --text-xs:   clamp(0.75rem,  0.71rem + 0.18vw, 0.8125rem);  /* 12 → 13px */
    --text-sm:   clamp(0.875rem, 0.83rem + 0.21vw, 0.9375rem);  /* 14 → 15px */
    --text-base: clamp(1rem,     0.95rem + 0.21vw, 1.0625rem);  /* 16 → 17px */
    --text-lg:   clamp(1.125rem, 1.06rem + 0.30vw, 1.25rem);    /* 18 → 20px */
    --text-xl:   clamp(1.25rem,  1.14rem + 0.54vw, 1.5rem);     /* 20 → 24px */
    --text-2xl:  clamp(1.5rem,   1.32rem + 0.89vw, 2rem);       /* 24 → 32px */
    --text-3xl:  clamp(1.875rem, 1.55rem + 1.61vw, 2.75rem);    /* 30 → 44px */
    --text-4xl:  clamp(2.25rem,  1.71rem + 2.68vw, 3.75rem);    /* 36 → 60px */
    --text-5xl:  clamp(2.75rem,  1.85rem + 4.46vw, 5.25rem);    /* 44 → 84px */

    /* Line heights */
    --leading-tight:   1.15;
    --leading-snug:    1.25;
    --leading-normal:  1.55;
    --leading-relaxed: 1.75;

    /* Letter spacing */
    --tracking-tighter: -0.04em;
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-eyebrow: 0.14em;

    /* Font weights — only 300/400/600 (Poppins) + 500/600 (Montserrat) ship */
    --font-light:    300;
    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     600;   /* no 700 cut shipped — maps to 600, no faux bold */

    /* Font families */
    --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    /* Display face — headings, nav, buttons. */
    --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;

    /* Radii */
    --radius-none: 0;
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   clamp(1rem, 0.9rem + 0.4vw, 1.25rem);   /* images + panels (~16-20px, live) */
    --radius-2xl:  clamp(1.25rem, 1rem + 1vw, 2rem);       /* large mist panels */
    --radius-full: 9999px;

    /* Shadows — light-mode tuned. Dark mode uses subtler shadows below. */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);

    /* Motion */
    --duration-fast:   120ms;
    --duration-normal: 200ms;
    --duration-slow:   320ms;
    --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

    /* Layout containers */
    --container-narrow:  42rem;     /*  672px — prose, centered intros */
    --container-default: 85.375rem; /* 1366px — live site container */
    --container-wide:    100rem;    /* 1600px — panels that break out */
    --container-gutter:  clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

    /* Vertical rhythm between page sections */
    --section-space:    clamp(4rem, 2.75rem + 5.5vw, 8rem);
    --section-space-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);

    /* Site header */
    --header-height: clamp(4.5rem, 4rem + 2vw, 6rem);
    --shadow-header: 0 1px 0 rgb(35 35 35 / 0.08), 0 8px 24px -12px rgb(35 35 35 / 0.18);
    --shadow-button: 0 10px 24px -14px rgb(0 0 0 / 0.55);
    --shadow-popover: 0 24px 48px -20px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(35 35 35 / 0.06);
    --drop-shadow-badge: drop-shadow(0 8px 24px rgb(0 0 0 / 0.35));

    /* Breakpoints (reference only — @media uses literal values).
       --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; */

    /* ----------------------------------------------------------------
       2. SEMANTIC — light theme defaults
       ---------------------------------------------------------------- */

    /* Surfaces */
    --color-bg:        var(--paper);
    --color-bg-subtle: var(--mist);
    --color-bg-muted:  var(--mist-strong);
    --color-bg-inset:  var(--paper);
    --color-bg-dark:   var(--ink);

    /* Text */
    --color-text:         var(--ink);
    --color-text-muted:   var(--stone);
    --color-text-subtle:  var(--stone);
    --color-text-on-accent: var(--ink);

    /* Borders */
    --color-border:        rgb(35 35 35 / 0.12);
    --color-border-strong: rgb(35 35 35 / 0.28);

    /* Accent — Flamore keeps interactive UI in ink; flame-yellow is reserved
       for the single highlighted CTA button (.button--accent). */
    --color-accent:       var(--ink);
    --color-accent-hover: var(--black);
    --color-accent-fg:    var(--paper);
    --color-flame:        var(--flame);
    --color-flame-hover:  var(--flame-hover);
    --color-overlay:      var(--overlay);

    /* Feedback */
    --color-danger:        var(--ember);
    --color-success:       var(--moss);
    --color-focus-ring:    var(--ink);
    --color-selection-bg:  var(--flame);
    --color-selection-fg:  var(--ink);
  }

  /* ----------------------------------------------------------------
     3. WEB FONTS — self-hosted Montserrat + Poppins (OFL, latin subset)
     ---------------------------------------------------------------- */

  @font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/Montserrat-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/Montserrat-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/assets/fonts/Poppins-300-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/Poppins-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/Poppins-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
  }
}