/* Nyovah Design Tokens — single source of truth for all CSS variables */
/* All 7 required base variables must always be present: --bg --surface --gold --sage --dusk --rose --ink */

/* ── CSS VARIABLES ── */
:root{
  /* Backgrounds */
  --bg:          #F5F0E8;
  --bg2:         #EDE8DF;
  --bg3:         #E4DDD2;
  --surface:     #FFFFFF;
  --surface2:    #FAF8F4;
  --glass:       rgba(var(--bg-rgb),0.96);

  /* Text */
  --text:        #1A1612;
  --text-dim:    #3D3530;
  --text-muted:  #6C6560;   /* darkened for 4.5:1 AA on parchment */

  /* RGB components — for rgba() compositing without hardcoded numbers */
  --gold-rgb:    196, 116, 42;   /* #C4742A */
  --ink-rgb:     26, 22, 18;     /* #1A1612 */
  --rose-rgb:    184, 90, 90;    /* #B85A5A */
  --sage-rgb:    107, 140, 122;  /* #6B8C7A — was wrong (was 74,136,112 = --green) */
  --dusk-rgb:    122, 104, 152;  /* #7A6898 */
  --bg-rgb:      245, 240, 232;  /* #F5F0E8 — for glass/nav backgrounds */

  /* Accents */
  --gold:        #C4742A;
  --gold-light:  #D4884A;
  --gold-dim:    #8A5218;
  --gold-darker: #6B3D0E;
  --gold-pale:   rgba(var(--gold-rgb), 0.1);

  /* Semantic — brand board names (ink/sage/dusk) */
  --ink:         #1A1612;   /* alias for --text */
  --ink2:        #3D3530;   /* alias for --text-dim */
  --ink3:        #6C6560;   /* alias for --text-muted */
  --ink4:        #A89E94;   /* subtle labels */
  --sage:        #6B8C7A;   /* dasha green / positive */
  --dusk:        #7A6898;   /* retrograde / special */
  --rose:        #B85A5A;
  --green:       #4A8870;
  --purple:      #7A6898;
  --blue:        #4A6898;

  /* Tint backgrounds */
  --sage-bg:     #E4EDE8;
  --gold-bg:     #F2EAD4;
  --dusk-bg:     #EDE8F4;
  --rose-bg:     #FDE8E8;

  /* Touch target floor */
  --tap:         44px;

  /* Layout */
  --nav-h:       52px;
  --bottom-nav-h:74px;

  /* ── BORDER RADIUS SCALE ── */
  --r-pill:      20px;   /* Pills, badges, rounded buttons */
  --r-card:      20px;   /* Primary cards (unified from 22px) */
  --r-md:        14px;   /* Secondary cards, inputs (alias for --r-sm) */
  --r-sm:        14px;   /* Secondary cards, input fields */
  --r-chip:      16px;   /* Chips, medium pills, notification cards */
  --r-inner:     12px;   /* Inner form fields, list items, inset elements */
  --r-tag:       10px;   /* Small tags, compact items */
  --r-xs:         8px;   /* Micro elements, progress bars */
  --r-2xs:        6px;   /* Inner elements, tight radii */

  /* Brand board semantic radius aliases */
  --radius-sm:     6px;
  --radius-md:    12px;
  --radius-lg:    18px;
  --radius-xl:    24px;
  --radius-full: 9999px;

  /* ── SHADOW SCALE ── */
  --shadow-sm:   0 2px 8px rgba(var(--ink-rgb),0.06);
  --shadow:      0 4px 16px rgba(var(--ink-rgb),0.10);
  --shadow-md:   0 8px 32px rgba(var(--ink-rgb),0.14);
  --shadow-gold: 0 4px 20px rgba(var(--gold-rgb),0.28);

  /* ── SPACING SCALE ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;

  /* Brand board semantic spacing aliases */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* ── MOTION TOKENS ── */
  --dur-fast:    0.15s;
  --dur-base:    0.20s;
  --dur-slow:    0.32s;
  --dur-enter:   0.42s;  /* brand board: panel/page enter transitions */
  --ease-std:    ease;
  --ease-slide:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);   /* brand board: true bouncy spring */
  --ease-out:    cubic-bezier(0.16,1,0.3,1);        /* brand board: expressive decelerate */
  --ease-inout:  cubic-bezier(0.65,0,0.35,1);       /* brand board: symmetric in-out */

  --border:      rgba(var(--ink-rgb),0.08);
  --border-md:   rgba(var(--ink-rgb),0.14);
  --border2:     rgba(var(--ink-rgb),0.14);   /* brand board alias for --border-md */

  /* ── TYPOGRAPHY SCALE ── */
  /* Accessibility floor: 12px minimum for all UI text */
  --text-xs:     11px;   /* Cinzel labels: nav tabs, eyebrows, card titles, form labels, dividers */
  --text-sm:     12px;   /* Cinzel buttons, chips, status bars, badges */
  --text-base:   14px;   /* DM Sans body, meta, helper text */
  --text-md:     15px;   /* Inputs, chat user bubbles */
  --text-lg:     17px;   /* AI chat bubbles, planet symbols */
  --text-xl:     19px;   /* Today Insight, AI body prose */
  --text-2xl:    26px;   /* Phase Hero name, dasha display numbers */
  --text-hero:   clamp(30px,7vw,46px); /* H1 display */

  /* Cosmic vars kept for compatibility */
  --cosmic:      var(--bg);
  --deep:        var(--bg2);
  --surface3:    var(--surface2);
}