/* ============================================================
   Cowork UI Kit — 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) */
  --status-success-h: 158;
  --status-success-s: 64%;
  --status-success-l: 40%;

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

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

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

  /* 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) */
  --warm-ink-l: 17%;         /* primary text */
  --warm-ink-2-l: 35%;       /* secondary */
  --warm-ink-3-l: 55%;       /* muted */

  /* ============ 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%;
  --dark-text-2-l: 65%;
  --dark-text-3-l: 47%;

  /* Dark vivid accents (independent from brand for tech-y feel) */
  --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 */

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

  --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 ============ */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-serif:   'Instrument Serif', 'Fraunces', Georgia, serif;
  --font-serif-heavy: 'Fraunces', 'Instrument Serif', 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 ============ */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-3xl:  32px;
  --r-full: 9999px;

  /* ============ MOTION ============ */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;

  /* ============ 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;
}