/* ═══════════════════════════════════════════════════════════════════
   ui-kit / core / tokens.css
   ───
   The single source of truth for every design decision.
   Every component only uses these custom properties — never raw values.

   TO THEME A SITE:
     Override any tokens in your own theme.css that loads after this file.
     Example: :root { --brand: #4ecdc4; --font-display: 'Raleway', sans-serif; }

   TIERS:
     Tier 1 — Primitive tokens (raw values, direct to override)
     Tier 2 — Semantic tokens (computed from primitives, used in components)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tier 1 Primitives ────────────────────────────────────────────── */
:root {

  /* Brand — single color that defines the entire palette feel */
  --brand:            #e63946;   /* main accent (override this first) */
  --brand-dim:        #c1121f;   /* darker pressed/hover variant */
  --brand-muted:      #7a1e27;   /* very dark tint for large areas */
  --brand-soft:       rgba(230, 57,  70, 0.10);
  --brand-glow:       rgba(230, 57,  70, 0.28);
  --brand-border:     rgba(230, 57,  70, 0.35);

  /* Surfaces — 6 steps from base to overlay */
  --bg:               #080809;   /* page canvas */
  --bg-raised:        #0e0e10;   /* sidebars, header */
  --surface:          #141416;   /* cards, input fields */
  --surface-2:        #1c1c1f;   /* elevated cards, hover states */
  --elevated:         #252528;   /* dropdowns, tooltips */
  --overlay:          #2f2f33;   /* modals, sheets */

  /* Text */
  --text-1:           #f0eff2;   /* primary / headings */
  --text-2:           #a09ea8;   /* secondary / body */
  --text-3:           #5e5c68;   /* muted / captions */
  --text-4:           #38363f;   /* very dim / placeholder */
  --text-on-brand:    #ffffff;   /* text on brand-colored backgrounds */
  --text-on-media:    #ffffff;   /* text over dark image / photo overlays (theme-independent) */

  /* Borders */
  --border:           rgba(240, 239, 242, 0.07);
  --border-hi:        rgba(240, 239, 242, 0.12);
  --border-str:       rgba(240, 239, 242, 0.20);

  /* Status */
  --success:          #4ade80;
  --success-soft:     rgba(74, 222, 128, 0.10);
  --warning:          #fbbf24;
  --warning-soft:     rgba(251, 191, 36,  0.10);
  --error:            #f87171;
  --error-soft:       rgba(248, 113, 113, 0.10);
  --info:             #60a5fa;
  --info-soft:        rgba(96,  165, 250, 0.10);

  /* Status fills — solid backgrounds + on-fill text for chips/banners/buttons.
     Theme-independent (the status hues above aren't overridden in light mode). */
  --danger:           #e63946;   /* destructive-action button background */
  --text-on-success:  #08120b;   /* dark text on a solid --success fill */
  --warning-deep:     #854d0e;   /* solid warning / offline banner background */
  --warning-text:     #fef08a;   /* text on --warning-deep */

  /* ── Typography ── */
  --font-display:     'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:        'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:        'JetBrains Mono', 'Cascadia Code', 'Courier New', monospace;

  /* Type scale — fluid from mobile to desktop */
  --text-2xs:    11px;
  --text-xs:     12px;
  --text-sm:     13px;
  --text-base:   15px;
  --text-md:     16px;
  --text-lg:     18px;
  --text-xl:     22px;
  --text-2xl:    28px;
  --text-3xl:    36px;
  --text-4xl:    48px;
  --text-5xl:    clamp(48px, 10vw, 80px);
  --text-display: clamp(60px, 16vw, 120px);

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   900;

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal: 0em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.10em;
  --tracking-widest: 0.20em;

  /* ── Spacing — 4px base grid ── */
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Content width caps */
  --content-xs:   480px;
  --content-sm:   640px;
  --content-md:   768px;
  --content-lg:   1024px;
  --content-xl:   1280px;

  /* ── Shape — single --radius-base scales all ── */
  --radius-base: 12px;   /* override this to go sharp (0–4px) or soft (20–32px) */
  --radius-xs:   calc(var(--radius-base) * 0.25);
  --radius-sm:   calc(var(--radius-base) * 0.5);
  --radius-md:   var(--radius-base);
  --radius-lg:   calc(var(--radius-base) * 1.5);
  --radius-xl:   calc(var(--radius-base) * 2);
  --radius-2xl:  calc(var(--radius-base) * 3);
  --radius-full: 9999px;

  /* ── Shadows — elevation system ── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.45), 0 0 0 1px var(--border);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.50), 0 0 0 1px var(--border);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--border);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(240,239,242,0.06);
  --shadow-brand: 0 4px 20px var(--brand-glow), 0 0 0 1px var(--brand-border);

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in:     cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0);
  --ease-bounce: cubic-bezier(0.34, 1.80, 0.64, 1.0);

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   350ms;
  --dur-slower: 600ms;

  /* ── Z-index ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;

  /* ── Gradients ── */
  --gradient-brand:   linear-gradient(135deg, var(--brand-dim) 0%, var(--brand) 60%, color-mix(in srgb, var(--brand) 70%, white) 100%);
  --gradient-surface: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  --gradient-hero:    linear-gradient(to bottom, transparent 40%, var(--bg) 100%);
  --gradient-overlay: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);

  /* ── Blur / Glass ── */
  --blur-sm:  blur(4px);
  --blur-md:  blur(12px);
  --blur-lg:  blur(24px);

  /* ── Atmosphere ──
     All default to "off" (0). Themes override to their personality.
     Utility classes (.grain, .vignette, .glass, .brand-bloom) read these tokens.
     ──────────────────────────────────────────────────────────────── */

  /* Grain / film noise — rendered as ::after pseudo-element */
  --grain-opacity: 0;          /* 0 = invisible. themes: dark-ink 0.14, fine-line 0.06 */
  --grain-blend:   overlay; /* overlay is more visible on dark surfaces than soft-light */
  --grain-size:    180px;      /* SVG tile repeat */

  /* Vignette — radial dark-edge fade rendered as ::before pseudo-element */
  --vignette-opacity: 0;       /* set by .vignette-sm/md/lg modifier classes */
  --vignette-spread:  60%;     /* % of radius before darkness begins */

  /* Glass / frosted surface */
  --glass-bg:        rgba(255, 255, 255, 0.04);
  --glass-border:    rgba(255, 255, 255, 0.08);
  --glass-blur:      12px;     /* bare px value — used as backdrop-filter: blur(var(--glass-blur)) */
  --glass-highlight: rgba(255, 255, 255, 0.06); /* top-edge 1px inset shimmer */

  /* Brand bloom — radial brand-glow behind sections, rendered as ::before pseudo-element */
  --bloom-opacity: 0;          /* themes: dark-ink 0.22, fine-line 0.28 */
  --bloom-spread:  65%;        /* radial gradient stop — higher = larger, softer glow */

  /* Gradient edge — left accent line; primarily used by fine-line theme */
  --grad-edge: none;           /* themes override: linear-gradient(180deg, brand-dim, brand) */

  /* ── Touch targets ── */
  --tap-min: 44px;   /* Apple HIG minimum */
}

/* ── Light mode override ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg:             #fafafa;
  --bg-raised:      #f4f3f0;
  --surface:        #ffffff;
  --surface-2:      #f0efec;
  --elevated:       #ffffff;
  --overlay:        #ffffff;

  --text-1:         #0f0e12;
  --text-2:         #5a5768;
  --text-3:         #908e9c;
  --text-4:         #c4c2cc;
  --text-on-brand:  #ffffff;

  --border:         rgba(10, 9, 15, 0.07);
  --border-hi:      rgba(10, 9, 15, 0.12);
  --border-str:     rgba(10, 9, 15, 0.20);

  --shadow-xs:   0 1px 2px rgba(0,0,0,0.08);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px var(--border);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10), 0 0 0 1px var(--border);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px var(--border);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
}