/* ==========================================================================
   Alfred — design tokens · redesign 2026-07
   Ported 1:1 from design prototype Alfred.dc.html + handoff README
   (design_handoff_alfred_landing). Values are extracted, not invented.

   BREAKPOINTS (CSS vars can't be used in @media — keep in sync by hand):
     820px  — grids collapse to 1 column, .al-sticky-links hidden,
              .al-hero-art hidden
     640px  — CTA buttons in .al-cta go full width

   Section background rhythm (top → bottom of the page):
     navy → mist → navy → cream → cream2 → cream → navy → cream →
     cream2 → navy → cream → cream2 → navy
   ========================================================================== */

:root {

  /* ── brand colors ────────────────────────────────────────────────────── */
  --navy:        #0B1929;  /* Midnight Navy — page body + navy sections     */
  --navy-panel:  #0F2237;  /* dialog card, form inputs (only allowed deriv.)*/
  --cream:       #F4EDE0;  /* cream sections; text on navy                  */
  --cream-2:     #EFE7D8;  /* alternating cream (knjižnica, paketi, FAQ)    */
  --cream-card:  #FBF6EB;  /* cards on cream (Kako deluje)                  */
  --brass:       #B8935A;  /* accent: CTA, hairlines, illustrations         */
  --brass-hover: #C4A067;  /* solid brass button/link hover                 */
  --graphite:    #2C3440;  /* secondary text on cream                       */
  --mist:        #E5E1D8;  /* risk-strip background                         */
  --sage:        #7A8B5C;  /* positive/local — dots, checks; NEVER body text*/
  --amber:       #C47C2F;  /* warnings — only the 2 privacy cards           */

  /* ── brass alpha scale (hairlines + fills; exact prototype values) ───── */
  --brass-a12: rgba(184, 147, 90, .12);  /* outline-btn hover fill (cream)  */
  --brass-a14: rgba(184, 147, 90, .14);  /* outline-btn hover fill (navy)   */
  --brass-a18: rgba(184, 147, 90, .18);  /* soft fills, dialog divider      */
  --brass-a22: rgba(184, 147, 90, .22);  /* En-dan progress track           */
  --brass-a25: rgba(184, 147, 90, .25);  /* footer top hairline             */
  --brass-a30: rgba(184, 147, 90, .30);  /* sticky border, card inner rule  */
  --brass-a35: rgba(184, 147, 90, .35);  /* card borders, 1px grid "fugas"  */
  --brass-a40: rgba(184, 147, 90, .40);  /* stronger card borders, facts    */
  --brass-a50: rgba(184, 147, 90, .50);  /* chips, secondary illo strokes   */
  --brass-a55: rgba(184, 147, 90, .55);  /* vignette border-top             */
  --brass-a60: rgba(184, 147, 90, .60);  /* hero outline CTA border         */

  /* semantic hairlines (1px solid <token>) */
  --hairline-soft:   var(--brass-a25);
  --hairline:        var(--brass-a35);
  --hairline-strong: var(--brass-a55);

  /* ── cream alpha scale (text on navy; fine text stays in .70–.85) ────── */
  --cream-a45: rgba(244, 237, 224, .45);  /* faint ("Naslednje: …")         */
  --cream-a50: rgba(244, 237, 224, .50);  /* source captions                */
  --cream-a55: rgba(244, 237, 224, .55);  /* muted italic list item         */
  --cream-a60: rgba(244, 237, 224, .60);  /* footer impressum               */
  --cream-a70: rgba(244, 237, 224, .70);  /* fine print floor               */
  --cream-a75: rgba(244, 237, 224, .75);  /* nav + footer links             */
  --cream-a78: rgba(244, 237, 224, .78);  /* pillar body text               */
  --cream-a82: rgba(244, 237, 224, .82);  /* section body text on navy      */
  --cream-a85: rgba(244, 237, 224, .85);  /* list items on navy             */
  --cream-a90: rgba(244, 237, 224, .90);  /* emphasized list on navy        */

  /* ── sage / amber alphas (privacy section) ───────────────────────────── */
  --sage-a08:  rgba(122, 139, 92, .08);   /* "Alfred obratno" card bg       */
  --sage-a09:  rgba(122, 139, 92, .09);   /* key-statement callout bg       */
  --sage-a42:  rgba(122, 139, 92, .42);   /* key-statement callout border   */
  --sage-a50:  rgba(122, 139, 92, .50);   /* "Alfred obratno" card border   */
  --amber-a06: rgba(196, 124, 47, .06);   /* amber card bg                  */
  --amber-a45: rgba(196, 124, 47, .45);   /* amber card border              */

  /* ── typography ──────────────────────────────────────────────────────── */
  --serif: 'Playfair Display', Georgia, serif;  /* 700 only (+700 italic)   */
  --sans:  'Inter', system-ui, -apple-system, sans-serif; /* 400/500/600    */

  /* scale (per handoff README; per-section variants in NOTES.md) */
  --fs-h2:      clamp(30px, 4.6vw, 50px);  /* section H2                    */
  --fs-h2-lg:   clamp(34px, 5.5vw, 60px);  /* final CTA "Pogovorimo se."    */
  --fs-hook:    clamp(23px, 3.2vw, 36px);  /* En-dan hook H3                */
  --fs-dialog:  clamp(20px, 2.5vw, 28px);  /* hero command line             */
  --fs-reply:   clamp(17px, 2.1vw, 22px);  /* hero reply line (italic)      */
  --fs-lead:    clamp(16px, 1.8vw, 18px);  /* section lead paragraph        */
  --fs-title:   20px;                      /* Playfair card h4              */
  --fs-body:    15px;                      /* default body / list           */
  --fs-body-sm: 14.5px;                    /* card body                     */
  --fs-list:    14px;                      /* dense card bullets            */
  --fs-small:   13.5px;                    /* nav/footer links, spec strip  */
  --fs-micro:   12.5px;                    /* "KAKO" rows, impressum        */
  --fs-eyebrow: 12px;                      /* eyebrow                       */

  --lh-h2:      1.06;
  --ls-h2:      -.015em;
  --ls-eyebrow: .2em;

  /* ── shape & layout ──────────────────────────────────────────────────── */
  --radius:    2px;                        /* everywhere; dots are the only exception */
  --container: 1140px;
  --gutter:    clamp(20px, 5vw, 56px);     /* horizontal section padding    */
  --section-y: clamp(64px, 9vw, 120px);    /* vertical section padding      */
  --sticky-h:  62px;                       /* sticky bar height = anchor scroll offset */

  /* ── illustrations (line-art) ────────────────────────────────────────── */
  --illo-sw: 1.8;   /* stroke-width; 'Srednja' = 1.8 (default), 'Tanka' = 1.25 */

  /* ── motion ──────────────────────────────────────────────────────────── */
  --ease:    ease;                          /* prototype uses plain ease     */
  --t-fast:  .2s;                           /* buttons, link color           */
  --t-med:   .25s;                          /* cards, FAQ marker             */
  --t-slide: .3s;                           /* sticky nav slideDown          */
  --dan-interval: 5.2s;                     /* En-dan rotation + progress    */

  /* z-index ladder: sticky nav 60 · skip link 100 (documented, not tokens) */

  /* ═══════════════════════════════════════════════════════════════════════
     LEGACY COMPAT TOKENS — consumed by the old css/components.css and the
     sub-pages (rezervacija, hvala*, legal, 404) until parts 2–6 replace
     them. DELETE this block after the full port lands.
     ═══════════════════════════════════════════════════════════════════════ */
  --navy-soft:       rgba(11, 25, 41, 0.72);
  --cream-soft:      var(--cream-a75);
  --brass-soft:      var(--brass-a35);
  --hairline-on-navy: rgba(244, 237, 224, 0.18);

  --fs-hero: clamp(1.75rem, 5.5vw, 3.4rem);
  --fs-h3:   clamp(1.15rem, 2.4vw, 1.35rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  --content-max: var(--container);
  --measure: 68ch;
  /* --t-fast/--t-med/--ease keep their names above with new (compatible) values */
}