/* =========================================================================
   TALENRY — Syphon Labs design system tokens
   Canonical light editorial system (see Design/DESIGN_SYSTEM.md).
   Talenry's brand ramp = blue (true to its electric-blue heritage,
   moved into the shared light system).
   ========================================================================= */

:root {
  /* ---- Neutrals & semantic surfaces (shared across all Syphon products) -- */
  --background: #FFFFFF;   /* default app background */
  --paper:      #f6f5f2;   /* warm off-white, alternating section band */
  --ink:        #07070f;   /* dark hero / primary dark surface */
  --ink-2:      #0a0a0f;   /* secondary dark interlude */
  --foreground: #07070f;   /* body text on light */
  --border:     #ececec;   /* default light-mode border */

  /* Neutral ramp (Tailwind defaults) */
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  /* ---- Brand ramp — Talenry (blue) -------------------------------------- */
  --brand:        #2563EB;   /* blue-600 — CTAs, icons, score bars */
  --brand-accent: #1e3a8a;   /* blue-900 — italic serif on light */
  --brand-dark:   #60a5fa;   /* blue-400 — italic serif on dark interlude */
  --brand-sky:    #93c5fd;   /* sky-300 — italic serif on hero dark */
  --brand-soft:   rgba(37,99,235,0.10);
  --brand-ring:   rgba(37,99,235,0.40);

  /* Default accent color (overridden per-section via --accent-color) */
  --accent-color: var(--brand-accent);

  /* ---- Semantic states (shared) ----------------------------------------- */
  --success:    #047857;  --success-bg: #ecfdf5;  --success-border:#a7f3d0;
  --warning:    #b45309;  --warning-bg: #fffbeb;  --warning-border:#fde68a;
  --danger:     #be123c;  --danger-bg:  #fff1f2;  --danger-border: #fecdd3;
  --info:       #2563EB;

  /* ---- Backward-compatible aliases (used by inline styles in HTML) ------ */
  /* All remaining inline usages sit on light surfaces, so these map light. */
  --fg:        #07070f;
  --fg-soft:   #404040;   /* neutral-700 */
  --fg-muted:  #525252;   /* neutral-600 — muted body */
  --fg-subtle: #737373;   /* neutral-500 — meta / tertiary */
  --electric:  var(--brand);
  --line:   var(--border);
  --line-2: var(--neutral-200);
  --line-3: var(--neutral-300);

  /* ---- Type ------------------------------------------------------------- */
  --font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --tracking-tight:  -0.03em;   /* H2 — never change (DESIGN_SYSTEM §1.3) */
  --tracking-tighter:-0.04em;
  --tracking-eyebrow: 0.14em;

  /* ---- Radii (rounded-xl = 12px on every card) -------------------------- */
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   12px;   /* canonical card radius */
  --radius-2xl:  16px;
  --radius-3xl:  20px;
  --radius-pill: 9999px;

  /* ---- Shadows (soft, light elevation) ---------------------------------- */
  --shadow-sm:  0 1px 2px rgba(7,7,15,0.05);
  --shadow-md:  0 8px 24px -14px rgba(7,7,15,0.16);
  --shadow-lg:  0 24px 50px -24px rgba(7,7,15,0.18);
  --shadow-xl:  0 40px 80px -32px rgba(7,7,15,0.22);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1320px;

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur-med:  280ms;
  --dur-slow: 600ms;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}