/**
 * Olon Design System — CSS Tokens
 * Source: figma/tokens.json · v1.0 · 2026-03-15
 * Tier: 3-tier (primitive → semantic → component)
 */

/* ─── PRIMITIVE ─── */
:root {
  /* Blue */
  --primitive-blue-50:  #EEF3FF;
  --primitive-blue-100: #D6E4FF;
  --primitive-blue-200: #ADC8FF;
  --primitive-blue-300: #84ABFF; /* ring-top */
  --primitive-blue-400: #5B8EFF;
  --primitive-blue-500: #1763FF; /* Olon Blue — primary brand */
  --primitive-blue-600: #0F52E0; /* ring-bottom */
  --primitive-blue-700: #0940B8;
  --primitive-blue-800: #063090;
  --primitive-blue-900: #031E68;

  /* Gray */
  --primitive-gray-0:    #FFFFFF;
  --primitive-gray-50:   #F4F3EF; /* Olon off-white / figure */
  --primitive-gray-100:  #E5E3DC;
  --primitive-gray-200:  #D1CFCA;
  --primitive-gray-300:  #B4B2AD;
  --primitive-gray-400:  #888782;
  --primitive-gray-500:  #6B6A66;
  --primitive-gray-600:  #3D4148;
  --primitive-gray-700:  #2A2D33;
  --primitive-gray-800:  #1C1E22;
  --primitive-gray-900:  #111316;
  --primitive-gray-950:  #0D0E10;
  --primitive-gray-1000: #080808; /* Olon black / ground */

  /* Semantic */
  --primitive-green-50:   #ECFDF5;
  --primitive-green-500:  #10B981;
  --primitive-green-700:  #047857;
  --primitive-yellow-50:  #FFFBEB;
  --primitive-yellow-500: #F59E0B;
  --primitive-yellow-700: #B45309;
  --primitive-red-50:     #FEF2F2;
  --primitive-red-500:    #EF4444;
  --primitive-red-700:    #B91C1C;

  /* Typography */
  --font-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  16px;
  --font-size-lg:  18px;
  --font-size-xl:  20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-widest:  0.14em;

  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Brand mark gradient */
  --mark-ring-top:    #84ABFF;
  --mark-ring-bottom: #0F52E0;
}

/* ─── SEMANTIC — DARK (default) ─── */
[data-theme="dark"],
:root {
  --color-bg:            var(--primitive-gray-1000);
  --color-surface-1:     var(--primitive-gray-900);
  --color-surface-2:     var(--primitive-gray-800);
  --color-surface-3:     var(--primitive-gray-700);
  --color-text-primary:  var(--primitive-gray-50);
  --color-text-second:   var(--primitive-gray-400);
  --color-text-disabled: var(--primitive-gray-600);
  --color-brand:         var(--primitive-blue-500);
  --color-brand-hover:   var(--primitive-blue-400);
  --color-brand-subtle:  rgba(23, 99, 255, 0.15);
  --color-border:        var(--primitive-gray-700);
  --color-border-subtle: var(--primitive-gray-800);
  --color-nucleus:       var(--primitive-gray-50);  /* mark nucleus on dark */
  --color-success:       var(--primitive-green-500);
  --color-warning:       var(--primitive-yellow-500);
  --color-error:         var(--primitive-red-500);
}

/* ─── SEMANTIC — LIGHT ─── */
[data-theme="light"] {
  --color-bg:            var(--primitive-gray-50);
  --color-surface-1:     var(--primitive-gray-0);
  --color-surface-2:     var(--primitive-gray-50);
  --color-surface-3:     var(--primitive-gray-100);
  --color-text-primary:  var(--primitive-gray-1000);
  --color-text-second:   var(--primitive-gray-500);
  --color-text-disabled: var(--primitive-gray-300);
  --color-brand:         var(--primitive-blue-500);
  --color-brand-hover:   var(--primitive-blue-600);
  --color-brand-subtle:  var(--primitive-blue-50);
  --color-border:        var(--primitive-gray-200);
  --color-border-subtle: var(--primitive-gray-100);
  --color-nucleus:       var(--primitive-gray-1000); /* mark nucleus on light */
  --color-success:       var(--primitive-green-500);
  --color-warning:       var(--primitive-yellow-500);
  --color-error:         var(--primitive-red-500);
}