/* design-systems/light-editorial-tech/tokens.css
 *
 * Structured token bindings for Light Editorial Tech.
 * Vintage-warm parchment canvas, tri-color gradient line accent,
 * steampunk illustration DNA, animated dot signature element.
 */

:root {

  /* ── BACKGROUNDS (four-step warm hierarchy) ── */
  --bg:              #f2edd8;   /* Page canvas — parchment cream */
  --bg-card:         #faf6e8;   /* Card surfaces, panels */
  --bg-card-2:       #f5f0dc;   /* Alternate card, nested panels */
  --bg-surface:      #ece7d0;   /* Inset areas, hover surfaces */

  /* ── TEXT ── */
  --fg:              #0e1220;   /* Primary — deep near-black */
  --fg-2:            #4a5570;   /* Secondary — mid blue-gray */
  --muted:           #8892aa;   /* Muted — labels, metadata */

  /* ── ACCENT COLORS ── */
  --accent:          #c94428;   /* Primary CTA, highlights, eyebrows */
  --accent-on:       #ffffff;   /* Text on accent background */
  --accent-hover:    #a83520;   /* Darker red for hover states */
  --accent-orange:   #b85220;   /* Warm secondary accent */
  --accent-green:    #167a4a;   /* Success, best-score */
  --accent-blue:     #1a5fc4;   /* Info, links, data values */
  --accent-purple:   #5b3cc4;   /* Decorative, secondary model color */
  --accent-teal:     #0a9e80;   /* Gradient line top, check marks */

  /* ── BORDERS ── */
  --border:          rgba(101, 82, 30, 0.12);   /* Subtle warm brown */
  --border-strong:   rgba(101, 82, 30, 0.22);   /* Card borders, emphasis */

  /* ── ILLUSTRATION PALETTE (separate from UI) ── */
  --illus-parchment:     #e8dfc8;
  --illus-parchment-mid: #d4c9a8;
  --illus-sepia:         #c4a882;
  --illus-rust:          #8b6914;
  --illus-ink:           #3d2b1a;
  --illus-arrow:         #c0392b;   /* Only color accent inside illustrations */

  /* ── GRADIENT LINE (vertical signature element) ── */
  --line-teal:   rgba(10,  158, 128, 0.45);
  --line-purple: rgba(91,   60, 196, 0.50);
  --line-blue:   rgba(26,   95, 196, 0.40);

  /* ── SHADOWS & ELEVATION ── */
  --elev-flat:    none;
  --elev-ring:    0 0 0 1px var(--border-strong);
  --elev-sm:      0 1px  3px rgba(14, 18, 32, 0.10);
  --elev-md:      0 4px 16px rgba(14, 18, 32, 0.15);
  --elev-glow-red:  0 4px 16px rgba(201, 68, 40, 0.25);
  --elev-glow-teal: 0 4px 16px rgba( 10,158,128, 0.20);
  --focus-ring:   0 0 0 3px rgba(201, 68, 40, 0.15);

  /* ── TYPOGRAPHY ── */
  --font-display: 'Fira Sans', sans-serif;       /* H1 only — weight 800 */
  --font-heading: 'Syne', sans-serif;            /* H2 / H3 — weight 700/600 */
  --font-body:    'Inter', sans-serif;           /* All UI, body, buttons */
  --font-mono:    'JetBrains Mono', monospace;   /* Labels, values, code */

  /* ── TYPE SCALE ── */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  26px;
  --text-3xl:  32px;
  --text-4xl:  48px;
  /* H1 uses clamp(40px, 7vw, 80px) */

  --leading-body:    1.6;
  --leading-tight:   1.05;
  --leading-heading: 1.2;

  --tracking-display:  -0.03em;
  --tracking-heading:  -0.02em;
  --tracking-eyebrow:   0.18em;
  --tracking-mono-sm:   0.08em;
  --tracking-mono-lg:   0.12em;

  /* ── SPACING ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;

  /* ── LAYOUT ── */
  --container-max:    960px;
  --container-gutter: 24px;
  --section-y:        80px;
  --section-y-tablet: 56px;
  --section-y-mobile: 40px;

  /* ── BORDER RADIUS ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   10px;    /* Buttons */
  --radius-lg:   12px;    /* Row items */
  --radius-xl:   16px;    /* Cards */
  --radius-full: 9999px;  /* Pills, badges, dots */

  /* ── MOTION ── */
  --motion-fast:     150ms;
  --motion-base:     200ms;
  --motion-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── SEMANTIC STATES ── */
  --success:  #167a4a;
  --warn:     #b85220;
  --danger:   #c94428;
}