/* ============================================================
   Kry UI — FOUNDATION layer
   Primitive HSL variables (the "atoms of color").
   Override these in brand preset → cả palette shift theo math.
   v0.4 — 2026-05-20
   ============================================================ */

:root {
  /* ============ BRAND PRIMITIVES (override per brand) ============ */
  /* Primary brand color — what brand "feels like" */
  --brand-primary-h: 12;       /* hue: 12 = coral · 28 = nâu trầm · 140 = sage · 252 = violet */
  --brand-primary-s: 50%;      /* saturation */
  --brand-primary-l: 60%;      /* lightness — base value */

  /* Secondary accent */
  --brand-accent-h: 95;
  --brand-accent-s: 18%;
  --brand-accent-l: 39%;

  /* Tertiary highlight */
  --brand-highlight-h: 38;
  --brand-highlight-s: 50%;
  --brand-highlight-l: 65%;

  /* Semantic status colors (rarely overridden per brand)
     v0.4.2 (2026-05-20) — darkened L values for WCAG AA text-on-light + text-on-soft-bg.
     Old L (success=40, danger=60, warning=50, info=53) failed AA when used as `color:` on
     cream OR on their own --*-soft bg (e.g. .badge-* → ratios 2.7-4.4 / need 4.5).
     New L (success=27, danger=44, warning=28, info=30):
       - PASS as text on cream (#fcfbf7)            → 4.8-5.5 :1
       - PASS as bg with white text                 → 5.0-5.5 :1
       - PASS as text on own --*-soft (alpha 0.2)   → 4.7-5.3 :1
     Soft bg alpha reduced 0.3 → 0.2 (in semantic.css) so it stays visually soft. */
  --status-success-h: 158;
  --status-success-s: 64%;
  --status-success-l: 27%;

  --status-danger-h: 0;
  --status-danger-s: 75%;
  --status-danger-l: 44%;

  --status-warning-h: 38;
  --status-warning-s: 92%;
  --status-warning-l: 28%;

  --status-info-h: 195;
  --status-info-s: 86%;
  --status-info-l: 30%;

  /* Neutral text/border base (warm tone tied to brand hue for harmony) */
  --neutral-h: var(--brand-primary-h);
  --neutral-s: 8%;

  /* ============ AESTHETIC: WARM ============ */
  /* Cream + soft accents. For consumer/landing/editorial/PWA. */
  --warm-bg-h: 40;
  --warm-bg-s: 50%;
  --warm-bg-l: 96%;          /* very light cream */
  --warm-surface-l: 98%;     /* card surface (lighter than bg) */
  --warm-surface2-l: 94%;    /* page accent / linen */
  --warm-border-l: 87%;
  --warm-rule-l: 83%;

  /* Warm text (uses neutral hue for harmony)
     v0.5 (Iter 7 A, 2026-05-20) — AAA bump:
       --warm-ink-2-l: 35 → 30 (AAA 7:1 normal text on cream across all 7 brand hues).
         Old 35% only reached 6.17-6.95 (AA 4.5 yes, AAA 7 no). New 30% → 7.55-8.24 worst-case.
         Side benefit: widens hierarchy gap text-2(30) ↔ text-3(38) from 3% → 8%.
       --warm-ink-3-l kept 38 (muted = large-text role, target 4.5:1, already passes 5.21-6.28).
       Verified via _a11y/contrast-aaa-iter7.js. */
  --warm-ink-l: 17%;         /* primary text */
  --warm-ink-2-l: 30%;       /* secondary — AAA 7:1 on cream */
  --warm-ink-3-l: 38%;       /* muted (large-text role) — AAA-large 4.5:1 on cream */

  /* ============ AESTHETIC: DARK ============ */
  /* Near-black with vivid accents. For dashboard/tool/dev. */
  --dark-bg-h: 240;
  --dark-bg-s: 20%;
  --dark-bg-l: 5%;           /* near-black */
  --dark-surface-l: 9%;
  --dark-surface2-l: 12%;
  --dark-sidebar-l: 7%;
  --dark-border-l: 18%;
  --dark-border-soft-l: 13%;

  --dark-text-h: 220;
  --dark-text-s: 13%;
  --dark-text-l: 91%;
  /* v0.5 (Iter 7 A, 2026-05-20) — AAA bump:
     --dark-text-2-l: 65 → 68 (AAA 7:1 on every dark surface incl. surface-2 L=12).
       Old 65% hit 6.84 on surface-2 (AA yes, AAA no). New 68% → 7.52-8.46.
       Side benefit: widens hierarchy gap text-2(68) ↔ text-3(62) from 3% → 6%.
     --dark-text-3-l kept 62 (muted = large-text role). */
  --dark-text-2-l: 68%;      /* secondary — AAA 7:1 on dark */
  --dark-text-3-l: 62%;      /* muted (large-text role) — AAA-large 4.5:1 on dark */

  /* Dark vivid accents (independent from brand for tech-y feel)
     v0.4.2: L kept 68% — balanced between (a) white text on `bg-violet` (4.35:1, just passes AA)
     and (b) text-on-dark-bg use. For chips/badges using `bg-dark-violet/20 text-dark-violet`,
     the visible bg is dark-violet blended onto near-black — use lighter chip text (token below). */
  --dark-violet-h: 252;
  --dark-violet-s: 100%;
  --dark-violet-l: 68%;

  --dark-cyan-h: 188;
  --dark-cyan-s: 86%;
  --dark-cyan-l: 53%;

  --dark-emerald-h: 158;
  --dark-emerald-s: 84%;
  --dark-emerald-l: 39%;

  --dark-amber-h: 38;
  --dark-amber-s: 92%;
  --dark-amber-l: 50%;

  --dark-danger-h: 0;
  --dark-danger-s: 84%;
  --dark-danger-l: 60%;

  /* ============ MESH GRADIENT PARAMS ============ */
  /* Warm mesh (4 hues for organic feeling) */
  --mesh-warm-1-h: 18;       /* peach */
  --mesh-warm-2-h: 340;      /* rose */
  --mesh-warm-3-h: 35;       /* amber */
  --mesh-warm-4-h: 120;      /* sage */

  /* Dark mesh */
  --mesh-dark-1-h: 265;      /* violet */
  --mesh-dark-2-h: 195;      /* cyan */
  --mesh-dark-3-h: 155;      /* emerald */
  --mesh-dark-4-h: 280;      /* deep violet */

  /* ============ TYPOGRAPHY — modular scale 1.25× (major third) ============ */
  --type-base: 16px;
  --type-ratio: 1.25;

  --type-xs:   12px;                                              /* enforce WCAG min */
  --type-sm:   14px;
  --type-md:   var(--type-base);                                  /* 16 */
  --type-lg:   calc(var(--type-base) * var(--type-ratio));        /* 20 */
  --type-xl:   calc(var(--type-base) * 1.5);                      /* 24 */
  --type-2xl:  calc(var(--type-base) * 1.875);                    /* 30 */
  --type-3xl:  calc(var(--type-base) * 2.25);                     /* 36 */
  --type-4xl:  calc(var(--type-base) * 3);                        /* 48 */
  --type-5xl:  calc(var(--type-base) * 3.75);                     /* 60 */
  --type-6xl:  calc(var(--type-base) * 4.5);                      /* 72 */
  --type-7xl:  calc(var(--type-base) * 6);                        /* 96 */
  --type-8xl:  calc(var(--type-base) * 8);                        /* 128 */

  /* Display scale beyond --type-8xl — deck hero numbers, magazine display */
  --type-mega: clamp(120px, 12vw, 180px);
  --type-hero: clamp(180px, 16vw, 240px);

  /* Editorial prose column widths */
  --prose-width:        680px;   /* optimal reading column */
  --prose-width-narrow: 580px;   /* mobile / tight */
  --prose-width-wide:   760px;   /* generous */

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;
  --lh-loose:    1.75;

  /* Editorial line-heights */
  --lh-prose:       1.7;   /* body editorial — longer measure */
  --lh-pull-quote:  1.3;   /* big pull-quote */

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* ============ FONT FAMILIES ============ */
  /* Web font + metric-matched fallback (Inter Fallback / Source Serif 4 Fallback declared in fonts/fonts.css)
     prevents CLS during async font load — fallback shows immediately with adjusted metrics so swap to
     web font is invisible. Pattern follows Next.js next/font and web.dev guidance. */
  --font-sans:    'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', 'Inter Fallback', sans-serif;
  /* Source Serif 4 = winner cho VN double-diacritic stack (ư̛+sắc, ơ̛+huyền, etc.)
     Test report: 00-templates/ui-kit/_font-test/test-vn-isolate.png — render dấu sắc tight & integrated, không floating
     Fallback Lora (Google v2 also có VN subset, render OK nhưng acute hơi cao) */
  --font-serif:   'Source Serif 4', 'Source Serif 4 Fallback', 'Lora', Georgia, serif;
  --font-serif-heavy: 'Source Serif 4', 'Source Serif 4 Fallback', 'Fraunces', 'Lora', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* ============ SPACING — 4px rhythm ============ */
  --space-unit: 4px;
  --space-0:  0;
  --space-1:  calc(var(--space-unit) * 1);    /* 4 */
  --space-2:  calc(var(--space-unit) * 2);    /* 8 */
  --space-3:  calc(var(--space-unit) * 3);    /* 12 */
  --space-4:  calc(var(--space-unit) * 4);    /* 16 */
  --space-5:  calc(var(--space-unit) * 5);    /* 20 */
  --space-6:  calc(var(--space-unit) * 6);    /* 24 */
  --space-8:  calc(var(--space-unit) * 8);    /* 32 */
  --space-10: calc(var(--space-unit) * 10);   /* 40 */
  --space-12: calc(var(--space-unit) * 12);   /* 48 */
  --space-16: calc(var(--space-unit) * 16);   /* 64 */
  --space-20: calc(var(--space-unit) * 20);   /* 80 */
  --space-24: calc(var(--space-unit) * 24);   /* 96 */
  --space-32: calc(var(--space-unit) * 32);   /* 128 */

  /* ============ RADIUS ============ */
  /* Legacy aliases (--r-*) — kept for backwards compat */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-3xl:  32px;
  --r-full: 9999px;

  /* Canonical radius scale (--radius-*) */
  --radius-none: 0;
  --radius-xs:   4px;    /* badge, chip */
  --radius-sm:   6px;    /* input, small button */
  --radius-md:   8px;    /* default button, card */
  --radius-lg:   12px;   /* card, modal */
  --radius-xl:   16px;   /* hero card, sheet */
  --radius-2xl:  24px;   /* bottom sheet, large card */
  --radius-3xl:  32px;
  --radius-full: 9999px; /* pill, avatar */

  /* ============ BORDER WIDTH ============ */
  --border-0:    0;
  --border-1:    1px;    /* default */
  --border-2:    1.5px;  /* emphasized — input focus, selected */
  --border-3:    2px;    /* heavy — error state, active selection */
  --border-4:    3px;    /* indicator bars */

  /* ============ MOTION — v0.5 Iter 40A (2026-05-20) ============
     Motion system codified from:
       - Material 3 Motion (m3.material.io/styles/motion/easing-and-duration/tokens-specs)
       - Apple HIG Motion (developer.apple.com/design/human-interface-guidelines/motion)
       - Polaris Motion Tokens (polaris-react.shopify.com/tokens/motion)
       - IBM Carbon Motion (carbondesignsystem.com/elements/motion/overview)
       - Tailwind v4 ease utilities
       - web.dev prefers-reduced-motion guidance
       - WCAG 2.2 SC 2.3.3 Animation from Interactions
     Each token's choice has a research-backed reason (see motion/MOTION.md). */

  /* Legacy aliases (--dur-* / --ease-*) — kept for backwards compat */
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;

  /* ─── Duration scale (6-step Fibonacci-like progression) ───
     Closely matches Material 3 Short→Long progression but uses 5 active steps + 1 hero. */
  --duration-instant:    0ms;     /* no-animation snap (a11y reduced-motion fallback) */
  --duration-fast:       120ms;   /* micro feedback: hover, tap, button press */
  --duration-normal:     200ms;   /* default transition: color/bg/border swap, tooltip */
  --duration-slow:       320ms;   /* modal, drawer, sheet entry */
  --duration-slower:     480ms;   /* page transition, large surface change */
  --duration-deliberate: 800ms;   /* emphasized hero moment, onboarding, full route */

  /* ─── Easing curves ───
     Curated from M3 + Apple + Polaris. Each curve has 1 canonical use-case. */
  --ease-linear:       linear;                                    /* constant speed — spinners, progress bars */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);             /* M3 emphasized-decel — most exits (enter from off-screen, modal fade-in) */
  --ease-in:           cubic-bezier(0.7, 0, 0.84, 0);             /* M3 emphasized-accel — most entries (leaving viewport, modal fade-out) */
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);            /* symmetric — accordion, tab switch */
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);         /* playful overshoot — success confirm, like/save tap */
  --ease-snap:         cubic-bezier(0.4, 0, 0.2, 1);              /* Material standard — utility default (color/bg swap) */
  --ease-emphasized:   cubic-bezier(0.2, 0, 0, 1);                /* M3 emphasized — hero, page, full-route */

  /* Backwards-compat aliases (deprecated — prefer canonical above) */
  --ease-out-soft:     var(--ease-snap);
  --ease-bounce:       cubic-bezier(0.68, -0.55, 0.265, 1.55);    /* legacy overshoot — use --ease-spring */

  /* ─── Displacement scale ───
     Translation distance for slide-in/out patterns. Matches spacing rhythm. */
  --motion-distance-sm: 4px;     /* tooltip nudge, icon shift */
  --motion-distance-md: 8px;     /* dropdown menu */
  --motion-distance-lg: 16px;    /* toast, drawer (mobile sheet) */
  --motion-distance-xl: 32px;    /* page transition, full hero */

  /* ─── Choreography tokens ───
     Pre-composed transition strings. Apply on the property you're animating.
     Pattern: `transition: var(--motion-fade-in);` */
  --motion-fade-in:    opacity var(--duration-normal) var(--ease-out);
  --motion-fade-out:   opacity var(--duration-fast) var(--ease-in);
  --motion-slide-up:   transform var(--duration-normal) var(--ease-out);
  --motion-slide-down: transform var(--duration-fast) var(--ease-in);
  --motion-scale-in:   transform var(--duration-normal) var(--ease-out);
  --motion-scale-out:  transform var(--duration-fast) var(--ease-in);
  --motion-blur-in:    filter var(--duration-slow) var(--ease-out);
  --motion-color:      color var(--duration-fast) var(--ease-snap);
  --motion-bg:         background-color var(--duration-fast) var(--ease-snap);
  --motion-shadow:     box-shadow var(--duration-normal) var(--ease-out);

  /* ─── Stagger delay ───
     Used for list-item entry animation (set per child via :nth-child(n) * var). */
  --motion-stagger-delay: 50ms;   /* 50ms between items — feels orchestrated not slow */

  /* Compound transitions — legacy, kept for back-compat. New code prefers --motion-* */
  --trans-color:    color var(--duration-fast) var(--ease-out);
  --trans-bg:       background-color var(--duration-fast) var(--ease-out);
  --trans-border:   border-color var(--duration-fast) var(--ease-out);
  --trans-all-fast: all var(--duration-fast) var(--ease-out);
  --trans-all-norm: all var(--duration-normal) var(--ease-out);

  /* ============ Z-INDEX ============ */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 30;
  --z-sticky:   40;
  --z-fixed:    50;
  --z-overlay:  60;
  --z-modal:    70;
  --z-toast:    80;
  --z-tooltip:  90;
}