/* ============================================================
   Savant Design System — Tokens
   A design system by Average Genius
   Single source of truth. Everything else references these.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------
     Palette
     Six families, nine steps each (100 lightest -> 900 darkest).
     --------------------------------------------------------- */

  /* Purple — Primary */
  --purple-100: #E3D9FF;
  --purple-200: #C5B6F5;
  --purple-300: #A38FEA;
  --purple-400: #8469DE;
  --purple-500: #6A47D1;
  --purple-600: #4529B1;
  --purple-700: #351A7B;
  --purple-800: #2A1461;
  --purple-900: #1D0C46;

  /* Teal — Secondary */
  --teal-100: #D3F3F4;
  --teal-200: #A8E1E3;
  --teal-300: #7FCFD2;
  --teal-400: #5BBEC1;
  --teal-500: #1BA1A6;
  --teal-600: #168B8F;
  --teal-700: #126F72;
  --teal-800: #0E5F63;
  --teal-900: #0A494D;

  /* Green — Success */
  --green-100: #D9F2E3;
  --green-200: #AFE2C1;
  --green-300: #86D3A0;
  --green-400: #5DAF84;
  --green-500: #37B56C;
  --green-600: #2D9C5B;
  --green-700: #237E49;
  --green-800: #1A663A;
  --green-900: #104C2A;

  /* Amber — Warning */
  --amber-100: #FEF3D9;
  --amber-200: #FDE7B0;
  --amber-300: #FBD97F;
  --amber-400: #F6C843;
  --amber-500: #F0B600;
  --amber-600: #E5A100;
  --amber-700: #C88D00;
  --amber-800: #A87400;
  --amber-900: #865A00;

  /* Red — Error */
  --red-100: #FDE3E3;
  --red-200: #F9B8B8;
  --red-300: #F18A8A;
  --red-400: #E97C7C;
  --red-500: #E55050;
  --red-600: #D14343;
  --red-700: #B53434;
  --red-800: #912828;
  --red-900: #6E1D1D;

  /* Grey — Neutral (dark-first: 100 mid-grey -> 900 near-black) */
  --grey-100: #757575;
  --grey-200: #4A4A4A;
  --grey-300: #404040;
  --grey-400: #303030;
  --grey-500: #2E2E2E;
  --grey-600: #242424;
  --grey-700: #1F1F1F;
  --grey-800: #1A1A1A;
  --grey-900: #121212;

  /* ---------------------------------------------------------
     Semantic roles
     --------------------------------------------------------- */
  --color-primary:        var(--purple-600);
  --color-primary-hover:  var(--purple-500);
  --color-primary-active: var(--purple-700);

  --color-secondary:        var(--grey-300);
  --color-secondary-hover:  var(--grey-200);
  --color-secondary-active: var(--grey-500);

  --color-accent:  var(--teal-600);
  --color-success: var(--green-500);
  --color-warning: var(--amber-500);
  --color-error:   var(--red-500);

  /* Surfaces & lines */
  --surface-page:   var(--grey-900); /* #121212 */
  --surface-raised: var(--grey-800); /* #1A1A1A */
  --surface-inset:  var(--grey-700); /* #1F1F1F */
  --border-hairline: var(--grey-400); /* #303030 */

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-muted:     rgba(255, 255, 255, 0.42);

  /* Focus ring — purple 500 @ 55% */
  --focus-ring: rgba(106, 71, 209, 0.55);

  /* ---------------------------------------------------------
     Type
     --------------------------------------------------------- */
  --font-sans: 'Coinbase Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---------------------------------------------------------
     Radius
     --------------------------------------------------------- */
  --radius-sharp: 0px;      /* button + field option */
  --radius-field: 4px;      /* field option */
  --radius-pill:  9999px;   /* button option */
  --radius-panel: 14px;     /* docs chrome only */

  /* ---------------------------------------------------------
     Component — Button
     --------------------------------------------------------- */
  --btn-primary-bg:        var(--color-primary);
  --btn-primary-bg-hover:  var(--color-primary-hover);
  --btn-primary-bg-active: var(--color-primary-active);
  --btn-primary-text:      #FFFFFF;

  --btn-secondary-bg:        var(--color-secondary);
  --btn-secondary-bg-hover:  var(--color-secondary-hover);
  --btn-secondary-bg-active: var(--color-secondary-active);
  --btn-secondary-text:      #FFFFFF;

  --btn-disabled-bg:   var(--grey-400);
  --btn-disabled-text: rgba(255, 255, 255, 0.35);

  /* ---------------------------------------------------------
     Component — Text field
     --------------------------------------------------------- */
  --field-bg:            var(--grey-800);
  --field-border:        var(--grey-400);
  --field-border-hover:  var(--grey-200);
  --field-border-focus:  var(--purple-500);
  --field-border-error:  var(--red-500);
  --field-text:          #FFFFFF;
  --field-placeholder:   var(--text-muted);
  --field-disabled-bg:   var(--grey-900);
  --field-disabled-text: rgba(255, 255, 255, 0.30);

  /* ---------------------------------------------------------
     Spacing scale (4px base)
     --------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------------------------------------------------------
     Elevation
     --------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 18px 44px rgba(0, 0, 0, 0.55);

  /* ---------------------------------------------------------
     Motion
     --------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 340ms;

  /* Monospace, for token values in docs */
  --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
}