/**
 * ĀROHA DIGITAL CORE — Design Token System
 * tokens.css — Issue 1: Define Design Tokens (CSS Variables)
 * Epic 1: The Design System (Core Identity Implementation)
 *
 * Technical-Minimalist Brand: Clinical Luxury
 * Precision | Intentionality | Tactility
 */

:root {
  /* ─── Brand Palette: Real ĀROHA Identity (from official moodboard) ─── */
  /* Primary surfaces */
  --color-cloud:          #F2EFE6;   /* Primary background — warm linen    */
  --color-wheat:          #D9C79C;   /* Warm accent / dividers / gold tone */
  --color-sage:           #A7B195;   /* Label green — muted botanical      */
  --color-moss:           #4C7A5B;   /* Deep botanical green — KEŚA        */
  --color-stone:          #8DB8AE;   /* Cool sage — supporting             */
  --color-terracotta:     #C4613A;   /* Packaging accent block — bold CTA  */
  --color-amber-glass:    #C8843A;   /* Bottle liquid / warm accent        */

  /* Aliases for backwards compatibility with existing code */
  --color-blush-base:     #F2EFE6;   /* → Cloud                           */
  --color-highlight:      #E8E3D8;   /* Slightly deeper linen              */
  --color-label-green:    #A7B195;   /* → Sage                            */
  --color-oil-gold:       #D9C79C;   /* → Wheat                           */
  --color-deep-moss:      #4C7A5B;   /* → Moss                            */
  --color-soft-sage:      #8DB8AE;   /* → Stone                           */
  --color-pure-black:     #1A1A18;   /* Warm near-black (not harsh)        */
  --color-pure-white:     #FFFFFF;   /* Inverted surfaces                  */
  --color-off-white:      #F2EFE6;   /* = Cloud                           */
  --color-glass:          rgba(242, 239, 230, 0.55);  /* Linen glass       */
  --color-glass-dark:     rgba(26, 26, 24, 0.04);     /* Warm dark tint    */

  /* ─── Typography System ─────────────────────────────────────────────── */
  --font-primary:         'Inter', sans-serif;
  --font-mono:            'JetBrains Mono', monospace;

  /* Typography Scale — Modular 1.25 (Major Third) */
  --text-xs:              0.64rem;   /* 10.24px  — tech labels             */
  --text-sm:              0.8rem;    /* 12.8px   — mono specs              */
  --text-base:            1rem;      /* 16px     — body                    */
  --text-md:              1.25rem;   /* 20px     — sub-heading             */
  --text-lg:              1.563rem;  /* 25px     — section heading         */
  --text-xl:              1.953rem;  /* 31.25px  — large heading           */
  --text-2xl:             2.441rem;  /* 39px     — display                 */
  --text-3xl:             3.052rem;  /* 48.8px   — hero                   */
  --text-4xl:             5rem;      /* 80px     — brand mark              */
  --text-5xl:             8rem;      /* 128px    — watermark               */
  --text-watermark:       22vw;      /* Fluid watermark — 0.03 opacity     */

  /* ─── Tracking (Letter-Spacing) Lock ────────────────────────────────── */
  --tracking-massive:     0.8em;     /* Brand mark: ĀROHA wordmark         */
  --tracking-elegant:     0.6em;     /* Product names: KĀNTI / KEŚA / REŚA */
  --tracking-tech:        0.15em;    /* JetBrains Mono — technical specs   */
  --tracking-label:       0.3em;     /* Navigation labels                  */
  --tracking-normal:      0.05em;    /* Body text                          */

  /* ─── Spacing System ─────────────────────────────────────────────────  */
  --space-1:              0.25rem;   /* 4px   */
  --space-2:              0.5rem;    /* 8px   */
  --space-3:              0.75rem;   /* 12px  */
  --space-4:              1rem;      /* 16px  */
  --space-5:              1.25rem;   /* 20px  */
  --space-6:              1.5rem;    /* 24px  */
  --space-8:              2rem;      /* 32px  */
  --space-10:             2.5rem;    /* 40px  */
  --space-12:             3rem;      /* 48px  */
  --space-16:             4rem;      /* 64px  */
  --space-20:             5rem;      /* 80px  */
  --space-24:             6rem;      /* 96px  */
  --space-32:             8rem;      /* 128px */
  --space-40:             10rem;     /* 160px */

  /* ─── Border System ──────────────────────────────────────────────────  */
  --border-thin:          1px solid var(--color-pure-black);
  --border-muted:         1px solid rgba(0, 0, 0, 0.12);
  --border-ghost:         1px solid rgba(0, 0, 0, 0.06);

  /* ─── Motion & Easing ───────────────────────────────────────────────── */
  --ease-out-expo:        cubic-bezier(0.19, 1.0, 0.22, 1.0);
  --ease-in-out-quart:    cubic-bezier(0.76, 0, 0.24, 1);
  --ease-snap:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast:        180ms;
  --duration-base:        320ms;
  --duration-slow:        600ms;
  --duration-xslow:       1200ms;

  /* ─── Layout ──────────────────────────────────────────────────────────  */
  --nav-height:           72px;
  --track-slide-width:    100vw;
  --track-slide-height:   100vh;
  --max-content:          1440px;
  --content-padding:      clamp(var(--space-6), 5vw, var(--space-16));

  /* ─── Z-Index Stack ──────────────────────────────────────────────────  */
  --z-grain:              1;         /* Grain overlay — always on top      */
  --z-cursor:             9999;      /* Custom cursor                      */
  --z-nav:                100;       /* Navigation bar                     */
  --z-progress:           90;        /* Scroll progress indicator          */
  --z-modal:              200;       /* Modals / overlays                  */
  --z-watermark:          0;         /* Background watermark text          */
  --z-content:            10;        /* Main slide content                 */
  --z-product:            20;        /* Product bottle — above watermark   */

  /* ─── Grain & Texture ─────────────────────────────────────────────────*/
  --grain-opacity:        0.09;      /* Tactile layer — global grain       */
  --watermark-opacity:    0.03;      /* Background product word marks      */
}

/* ─── Dark Context Overrides (used inside inverted sections) ──────────── */
[data-theme="invert"] {
  --color-blush-base:     #0A0806;
  --color-pure-black:     #F7F2EF;
  --color-label-green:    #1A1E15;
  --border-thin:          1px solid #F7F2EF;
}