/* ═══════════════════════════════════════════
   FITCHEF TOKENS v2.0
   Single source of truth. Never hardcode values.
   ═══════════════════════════════════════════ */

:root {
  /* Color — Core */
  --fc-bg:           #F9F8F6;
  --fc-bg-alt:       #FAFAF9;
  --fc-surface:      #FFFFFF;
  --fc-rail:         #EDEAE4;
  --fc-card:         #FFFFFF;
  --fc-accent:       #00D18E;
  --fc-accent-dim:   rgba(0,209,142,0.07);
  --fc-accent-hover: #00B87A;

  /* Color — Text */
  --fc-ink:          #1A1A1A;
  --fc-body:         #2D2C2A;
  --fc-dim:          #8C8A85;
  --fc-ghost:        #B5B3AE;

  /* Color — Borders & Shadows */
  --fc-border:       #E8E6E0;
  --fc-border-light: rgba(0,0,0,0.04);
  --fc-shadow-sm:    0 1px 3px rgba(0,0,0,0.04);
  --fc-shadow:       0 2px 8px rgba(0,0,0,0.04);
  --fc-shadow-hover: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --fc-shadow-player:0 10px 40px rgba(0,0,0,0.07);

  /* Color — Glass */
  --fc-glass:        rgba(249,248,246,0.92);

  /* Color — Dark Rail (Monolith) */
  --fc-rail-dark:    #1A1A1A;
  --fc-rail-icon:    rgba(255,255,255,0.45);
  --fc-rail-label:   rgba(255,255,255,0.32);
  --fc-rail-hover:   rgba(255,255,255,0.06);
  --fc-rail-active:  rgba(255,255,255,0.10);

  /* Color — Dark Player */
  --fc-player-dark:  #1A1A1A;
  --fc-player-wave:  rgba(255,255,255,0.15);

  /* Color — Dark Rows (Cluster Playlist) */
  --fc-row-dark:     #1E1D1B;
  --fc-row-hover:    #262523;

  /* Color — Palette */
  --fc-purple:       #6366F1;
  --fc-amber:        #F59E0B;
  --fc-pink:         #EC4899;
  --fc-violet:       #8B5CF6;
  --fc-teal:         #14B8A6;

  /* Color — Verdicts */
  --fc-verified:     #00D18E;
  --fc-verified-bg:  rgba(0,209,142,0.08);
  --fc-contested:    #F59E0B;
  --fc-contested-bg: rgba(245,158,11,0.08);
  --fc-emerging:     #6366F1;
  --fc-emerging-bg:  rgba(99,102,241,0.08);

  /* Color — Evidence Grades */
  --fc-grade-a:      #00D18E;
  --fc-grade-b:      #3B82F6;
  --fc-grade-c:      #F59E0B;
  --fc-grade-d:      #EF4444;

  /* Color — Status */
  --fc-danger:       #EF4444;
  --fc-danger-bg:    rgba(239,68,68,0.08);
  --fc-warning:      #D97706;
  --fc-warning-bg:   rgba(217,119,6,0.08);
  --fc-info:         #3B82F6;
  --fc-info-bg:      rgba(59,130,246,0.08);
  --fc-success:      #059669;
  --fc-success-bg:   rgba(5,150,105,0.08);

  /* Color — Study Design Badges */
  --fc-design-rct:       #059669;
  --fc-design-rct-bg:    rgba(5,150,105,0.08);
  --fc-design-meta:      #4F46E5;
  --fc-design-meta-bg:   rgba(79,70,229,0.08);
  --fc-design-cohort:    #2563EB;
  --fc-design-cohort-bg: rgba(37,99,235,0.08);
  --fc-design-cross:     #7C3AED;
  --fc-design-cross-bg:  rgba(124,58,237,0.08);
  --fc-design-review:    #059669;
  --fc-design-review-bg: rgba(5,150,105,0.08);
  --fc-design-invitro:   #4F46E5;
  --fc-design-invitro-bg:rgba(79,70,229,0.08);
  --fc-design-animal:    #B45309;
  --fc-design-animal-bg: rgba(180,83,9,0.08);
  --fc-design-case:      #059669;
  --fc-design-case-bg:   rgba(5,150,105,0.08);

  /* Typography — Families */
  --fc-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fc-display: 'Playfair Display', Georgia, serif;
  --fc-serif:   'Georgia', 'Times New Roman', serif;
  --fc-mono:    'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Typography — Scale */
  --fc-text-hero:    4.2rem;
  --fc-text-h1:      3rem;
  --fc-text-h2:      1.5rem;
  --fc-text-body:    1.28rem;
  --fc-text-prose:   21px;    /* Serif reading body — 65 chars/line at 44rem (Medium-grade) */
  --fc-text-ui:      0.88rem;
  --fc-text-small:   0.78rem;
  --fc-text-micro:   0.62rem;
  --fc-text-nano:    7px;

  /* Typography — Line Heights */
  --fc-lh-tight:     1.06;
  --fc-lh-heading:   1.2;
  --fc-lh-snug:      1.35;
  --fc-lh-ui:        1.5;
  --fc-lh-hook:      1.65;  /* Editorial intro-hook density — used by both fuel + narrative tier intro_hook render blocks */
  --fc-lh-prose:     1.75;
  --fc-lh-body:      1.85;

  /* Typography — Weights */
  --fc-w-light:      300;
  --fc-w-regular:    400;
  --fc-w-medium:     500;
  --fc-w-semibold:   600;
  --fc-w-bold:       700;
  --fc-w-extrabold:  800;
  --fc-w-black:      900;

  /* Spacing — 4px base, power-of-two feel */
  --fc-space-0:      2px;
  --fc-space-1:      4px;
  --fc-space-2:      8px;
  --fc-space-3:      12px;
  --fc-space-4:      16px;
  --fc-space-5:      20px;
  --fc-space-6:      24px;
  --fc-space-7:      28px;
  --fc-space-8:      32px;
  --fc-space-9:      36px;
  --fc-space-10:     40px;
  --fc-space-12:     48px;
  --fc-space-13:     52px;
  --fc-space-14:     56px;
  --fc-space-16:     64px;
  --fc-space-20:     80px;

  /* Radius
     Scale: 4 → 6 → 8 → 12 → 14 → 20 → 100
     Note: radius-lg intentionally matches radius-sm (14px) for library cards.
     Both are valid aliases. Use --fc-radius (20px) for large rounded surfaces. */
  --fc-radius-xxs:   4px;
  --fc-radius-xs:    12px;
  --fc-radius-sm:    14px;
  --fc-radius:       20px;   /* default — myth cards, modals, large surfaces */
  --fc-radius-lg:    14px;   /* alias of sm — used on library cards */
  --fc-radius-pill:  100px;

  /* Layout */
  --fc-nav-width:    72px;
  --fc-sidebar-width:380px;
  --fc-content-max:  860px;
  --fc-page-pad:     48px;
  --fc-prose-max:    704px;   /* 44rem — matches fc-article-body max-width */
  --fc-section-gap:  48px;
  --fc-player-width: 600px;
  --fc-player-height:80px;

  /* Sidebar spacing */
  --fc-side-gap:     20px;
  --fc-side-pad-x:   32px;
  --fc-side-pad-top:  40px;
  --fc-side-pad-bot:  28px;

  /* Transitions */
  --fc-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --fc-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}