/* ============================================================
   RELAIBLE: Design tokens
   Owns every custom property: color, typography, spacing, radius, shadow, border and motion. All tracking is zero by design; no letter-spacing tokens exist.
   ============================================================ */

/* ============================================================
   RELAIBLE: Color tokens
   Duotone brand: deep Navy ink (Oliver Wyman heritage) +
   electric Aqua "spark" (agentic AI energy). Cool neutrals.
   ============================================================ */

:root {
  /* ---- Navy / Ink (primary brand, surfaces & depth) ---- */
  --navy-950: #050D20;
  --navy-900: #081634;
  --navy-800: #0C2148;
  --navy-700: #122E5E;
  --navy-600: #1A3D78;
  --navy-500: #28508F;

  /* ---- Brand Blue (primary action, links, focus) ---- */
  --blue-700: #1A43C8;
  --blue-600: #2456E6;   /* primary */
  --blue-500: #3D6BFF;
  --blue-400: #6B92FF;
  --blue-300: #A7C0FF;
  --blue-200: #CBD8FF;
  --blue-100: #E1E9FF;
  --blue-50:  #F0F4FF;

  /* ---- Spark / Aqua (the AI accent: energy, agents, live state) ---- */
  --spark-700: #08938A;
  --spark-600: #0BB3A3;
  --spark-500: #14D6C4;  /* hero accent */
  --spark-400: #56E6D9;
  --spark-300: #97F1E8;
  --spark-200: #BEF6F0;
  --spark-100: #DDFBF7;

  /* ---- Neutrals (cool, faint blue cast) ---- */
  --white:    #FFFFFF;
  --gray-50:  #F7F8FB;
  --gray-100: #EEF1F6;
  --gray-200: #E1E6EF;
  --gray-300: #CDD4E0;
  --gray-400: #A7B0C2;
  --gray-500: #7A8499;
  --gray-600: #586075;
  --gray-700: #3C4356;
  --gray-800: #262C3B;
  --gray-900: #161A26;
  --black:    #0A0C12;

  /* ---- Semantic signals ---- */
  --success-600: #138A4E;
  --success-500: #1FB866;
  --success-100: #DAF6E7;
  --warning-600: #C7820B;
  --warning-500: #E9A91C;
  --warning-100: #FBF0D4;
  --danger-600:  #CB2F33;
  --danger-500:  #E5484D;
  --danger-100:  #FCE0E1;

  /* ============================================================
     SEMANTIC ALIASES: reach for these in UI, not the raw scales
     ============================================================ */

  /* Text */
  --text-strong:   var(--navy-900);
  --text-body:     var(--gray-700);
  --text-muted:    var(--gray-500);
  --text-subtle:   var(--gray-400);
  --text-on-dark:  #EAF0FA;
  --text-on-dark-muted: #9DAAC4;
  --text-link:     var(--blue-600);
  --text-accent:   var(--spark-700);

  /* Surfaces: light */
  --surface-page:    var(--gray-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--gray-100);
  --surface-raised:  var(--white);
  --surface-hover:   var(--gray-100);

  /* Surfaces: dark (the "exciting" agentic canvas) */
  --surface-ink:        var(--navy-950);
  --surface-ink-raised: var(--navy-900);
  --surface-ink-card:   var(--navy-800);
  --surface-ink-hover:  var(--navy-700);

  /* Borders & lines */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-ink:     rgba(255,255,255,0.10);
  --border-ink-strong: rgba(255,255,255,0.18);

  /* Brand / action */
  --brand-primary:        var(--blue-600);
  --brand-primary-hover:  var(--blue-700);
  --brand-primary-text:   var(--white);
  --brand-accent:         var(--spark-500);
  --brand-accent-strong:  var(--spark-600);
  --brand-ink:            var(--navy-900);

  /* Focus ring */
  --focus-ring: var(--blue-500);

  /* Agent / live status mapping */
  --status-thinking: var(--spark-500);
  --status-running:  var(--blue-500);
  --status-done:     var(--success-500);
  --status-error:    var(--danger-500);
  --status-idle:     var(--gray-400);

  /* Signature gradient: used sparingly for hero spark moments only */
  --grad-spark: linear-gradient(120deg, var(--spark-500) 0%, var(--blue-500) 100%);
  --grad-ink:   linear-gradient(160deg, var(--navy-800) 0%, var(--navy-950) 100%);
}

/* ============================================================
   RELAIBLE: Typography tokens
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (1.25 major-third-ish, tuned) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:15px;
  --text-md:  17px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 62px;
  --text-6xl: 80px;

  /* Weights */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-extrabold:800; /* @kind other */

  /* Line heights */
  --lh-tight:   1.05; /* @kind other */
  --lh-snug:    1.2; /* @kind other */
  --lh-normal:  1.45; /* @kind other */
  --lh-relaxed: 1.6; /* @kind other */

  /* Letter spacing */
  --ls-tighter: 0; /* @kind other */
  --ls-tight:   0; /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-wide:    0; /* @kind other */
  --ls-caps:    0; /* @kind other */

  /* Semantic roles */
  --type-display-font: var(--font-display);
  --type-heading-font: var(--font-display);
  --type-body-font:    var(--font-sans);
  --type-mono-font:    var(--font-mono);

  --type-eyebrow-size: var(--text-xs);
  --type-eyebrow-spacing: 0;
  --type-eyebrow-weight: var(--fw-semibold);
}

/* ============================================================
   RELAIBLE: Spacing & sizing tokens
   Base unit: 4px. Layout rhythm built on this scale.
   ============================================================ */

:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* Container widths */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  /* Component sizing */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;

  /* Common gaps */
  --gutter: var(--space-6);
  --section-y: var(--space-12);
}

/* ============================================================
   RELAIBLE: Radius, shadow, border & motion tokens
   ============================================================ */

:root {
  /* ---- Corner radii ---- (confident but not pill-soft) */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Elevation / shadow ---- (cool navy-tinted, soft) */
  --shadow-xs: 0 1px 2px rgba(8, 22, 52, 0.06);
  --shadow-sm: 0 1px 3px rgba(8, 22, 52, 0.08), 0 1px 2px rgba(8, 22, 52, 0.04);
  --shadow-md: 0 4px 12px rgba(8, 22, 52, 0.08), 0 2px 4px rgba(8, 22, 52, 0.05);
  --shadow-lg: 0 12px 28px rgba(8, 22, 52, 0.12), 0 4px 8px rgba(8, 22, 52, 0.06);
  --shadow-xl: 0 24px 56px rgba(8, 22, 52, 0.16), 0 8px 16px rgba(8, 22, 52, 0.08);

  /* On-dark elevation */
  --shadow-ink: 0 16px 40px rgba(0, 0, 0, 0.45);

  /* Spark glow: for live/agentic accent moments only */
  --glow-spark: 0 0 0 1px rgba(20, 214, 196, 0.4), 0 0 24px rgba(20, 214, 196, 0.28);
  --glow-blue:  0 0 0 1px rgba(61, 107, 255, 0.4), 0 0 24px rgba(61, 107, 255, 0.25);

  /* Focus ring */
  --ring-focus: 0 0 0 3px rgba(61, 107, 255, 0.35);
  --ring-focus-accent: 0 0 0 3px rgba(20, 214, 196, 0.35);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
  --dur-slower: 520ms; /* @kind other */
}