/*
 * design-tokens.css — Single source of truth for all Trarity design tokens.
 *
 * Usage:
 *   <link rel="stylesheet" href="/shared/design-tokens.css" />
 *
 * For marketplace/mentor pages, also add:
 *   <link rel="stylesheet" href="/shared/palette-gold.css" />
 *
 * Tokens are overridable: inline :root blocks or tenant-branding.js still win.
 */

:root {
  /* ─── Surfaces ─── */
  --bg: #0a0c10;
  --surface: #0d1014;
  --surface2: #11151b;
  --surface3: #161b24;
  --glass: rgba(13,16,20,.95);
  --glass2: rgba(13,16,20,.88);

  /* ─── Text ─── */
  --ink: #e9eef6;
  --muted: #8b99ad;
  --chart-text: rgba(226,232,240,.9);
  --chart-grid: rgba(255,255,255,.08);

  /* ─── Borders ─── */
  --line: rgba(255,255,255,.068);
  --line2: rgba(255,255,255,.055);
  --line-soft: rgba(255,255,255,.042);

  /* ─── Accent ─── */
  --accent: #6ba8cc;
  --accentA: #5a8ec7;
  --accentB: #6b8faa;
  --accent-glow: color-mix(in srgb, var(--accentA) 50%, transparent);
  --accent-tint:    color-mix(in srgb, var(--accentA) 8%, transparent);
  --accent-border:  color-mix(in srgb, var(--accentA) 20%, transparent);
  --accent-hover:   color-mix(in srgb, var(--accentA) 12%, transparent);
  --accent-focus:   color-mix(in srgb, var(--accentA) 50%, transparent);
  --accent-light:   color-mix(in srgb, var(--accentA) 80%, white);

  /* ─── Status ─── */
  --good: #3b9b6a;
  --bad: #c75555;
  --warn: #f59e0b;

  /* ─── Marketplace / Mentor palette (opt-in via palette-gold.css) ─── */
  --gold: #d4a853;
  --gold-soft: rgba(212,168,83,.12);
  --gold-glow: rgba(212,168,83,.35);
  --warm: #e8c47a;
  --blue: #6ba8cc;
  --blue-soft: rgba(107,168,204,.1);
  --purple: #a87ce8;
  --purple-soft: rgba(168,124,232,.1);

  /* ─── Shadows ─── */
  --shadow1: 0 4px 24px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.25);
  --shadow2: 0 12px 48px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.30);
  --shadow-glow: 0 0 40px color-mix(in srgb, var(--accentA) 6%, transparent);

  /* ─── Layout ─── */
  --r: clamp(12px, 1.4vw, 16px);
  --r-lg: clamp(14px, 1.5vw, 20px);
  --pad: clamp(1rem, 2vw, 1.5rem);
  --gutter: clamp(16px, 2vw, 24px);

  /* ─── Typography ─── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font: var(--font-sans);
  --fs-base: clamp(.8rem, .88vw, .92rem);
  --fs-sm: clamp(.7rem, .78vw, .82rem);
  --fs-xs: clamp(.64rem, .7vw, .74rem);
  --fs-lg: clamp(.9rem, 1vw, 1.02rem);

  /* ─── Easings ─── */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: dark;
}

/* ─── Light theme ─── */
body.theme-light {
  --bg: #f1f5f9;
  --surface: rgba(255,255,255,.85);
  --surface2: rgba(255,255,255,.75);
  --surface3: #e2e8f0;
  --glass: rgba(255,255,255,.85);
  --glass2: rgba(255,255,255,.75);
  --ink: #0b162c;
  --muted: #475569;
  --good: #3b9b6a;
  --bad: #c75555;
  --warn: #d97706;
  --chart-text: rgba(30,41,59,.92);
  --chart-grid: rgba(0,0,0,.08);
  --line: rgba(0,0,0,.08);
  --line2: rgba(0,0,0,.06);
  --line-soft: rgba(0,0,0,.04);
  --accent-glow: color-mix(in srgb, var(--accentA) 15%, transparent);
  --shadow1: 0 4px 24px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow2: 0 12px 48px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.06);
  color-scheme: light;
}