/* ============================================================================
   AI New Co — Design Tokens
   Foundations: color, typography, spacing, radius, elevation, motion.
   Light-first. Single electric violet/indigo accent. Cool, calm neutrals.
   Import this file anywhere you build with the AI New Co brand.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Fonts — loaded from Google Fonts CDN.
   Sora = geometric, modern, technical display/UI typeface.
   JetBrains Mono = developer-grade mono for code, data, labels, eyebrows.
   NOTE: substitute local .woff2 in /fonts for offline / production use.
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ==========================================================================
     1. CORE PALETTE — raw color ramps (not used directly in UI; map via roles)
     ========================================================================== */

  /* Brand — Electric Violet / Indigo. The single accent of the system. */
  --violet-50:  #F2F0FF;
  --violet-100: #E6E2FF;
  --violet-200: #CDC5FF;
  --violet-300: #AEA1FF;
  --violet-400: #8B78FF;
  --violet-500: #6451F5;  /* primary action */
  --violet-600: #4F3BE6;  /* primary hover */
  --violet-700: #3F2DC4;  /* primary press */
  --violet-800: #31239B;
  --violet-900: #221770;

  /* Neutrals — cool, faintly violet-tinted gray. The workhorse of the system. */
  --ink-0:   #FFFFFF;
  --ink-25:  #FAFAFC;
  --ink-50:  #F5F6F9;
  --ink-100: #ECEEF3;
  --ink-200: #DEE1EA;
  --ink-300: #C7CCD9;
  --ink-400: #A0A7B9;
  --ink-500: #767E93;
  --ink-600: #565E72;
  --ink-700: #3C4356;
  --ink-800: #262C3B;
  --ink-900: #141824;  /* near-black brand ink */
  --ink-950: #0C0F18;  /* deepest — dark sections, footers */

  /* Support hues — used sparingly: status + data viz only. */
  --green-100: #D6F5E3;
  --green-500: #12A65A;
  --green-600: #0E8A4A;
  --amber-100: #FCEFD2;
  --amber-500: #E0A23B;
  --amber-600: #C2842A;
  --red-100:   #FBE0E1;
  --red-500:   #E04652;
  --red-600:   #C43340;
  --cyan-100:  #D5F3F8;
  --cyan-500:  #1FB6CE;   /* secondary data-viz accent, pairs with violet */

  /* ==========================================================================
     2. SEMANTIC ROLES — always build UI against these, never raw ramps
     ========================================================================== */

  /* Surfaces (light-first) */
  --bg-base:        var(--ink-25);   /* app/page background */
  --bg-surface:     var(--ink-0);    /* cards, panels, sheets */
  --bg-subtle:      var(--ink-50);   /* sunken wells, table stripes */
  --bg-muted:       var(--ink-100);  /* hover rows, chips */
  --bg-inverse:     var(--ink-950);  /* dark sections, tooltips */

  /* Foreground / text */
  --fg-1: var(--ink-900);   /* primary text, headings */
  --fg-2: var(--ink-600);   /* secondary text, body de-emphasis */
  --fg-3: var(--ink-500);   /* tertiary, captions, metadata */
  --fg-4: var(--ink-400);   /* disabled, placeholder */
  --fg-on-accent: #FFFFFF;  /* text on violet */
  --fg-on-inverse: var(--ink-100); /* text on dark surfaces */

  /* Brand / accent */
  --accent:          var(--violet-500);
  --accent-hover:    var(--violet-600);
  --accent-press:    var(--violet-700);
  --accent-subtle:   var(--violet-50);   /* tinted backgrounds */
  --accent-subtle-2: var(--violet-100);  /* tinted hover */
  --accent-fg:       var(--violet-600);  /* violet text on light */

  /* Borders & dividers */
  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-accent:  var(--violet-300);
  --ring:           color-mix(in oklch, var(--violet-500) 45%, transparent); /* focus ring */

  /* Status */
  --success:     var(--green-500);
  --success-bg:  var(--green-100);
  --warning:     var(--amber-500);
  --warning-bg:  var(--amber-100);
  --danger:      var(--red-500);
  --danger-bg:   var(--red-100);
  --info:        var(--violet-500);
  --info-bg:     var(--violet-50);

  /* ==========================================================================
     3. TYPOGRAPHY
     ========================================================================== */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* Type scale — 1.250 (major third), base 16px */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  2.875rem;  /* 46 */
  --text-4xl:  3.625rem;  /* 58 */
  --text-5xl:  4.5rem;    /* 72 */

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* Line heights */
  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Tracking */
  --ls-tight:  -0.022em;  /* large display */
  --ls-snug:   -0.012em;  /* headings */
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-eyebrow: 0.16em;   /* uppercase mono eyebrows */

  /* ==========================================================================
     4. SPACING — 4px base grid
     ========================================================================== */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ==========================================================================
     5. RADIUS — soft but architectural. Geometric, not pill-everything.
     ========================================================================== */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ==========================================================================
     6. ELEVATION — soft, cool-tinted shadows. Restrained for enterprise calm.
     ========================================================================== */
  --shadow-xs: 0 1px 2px rgba(20, 24, 36, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 24, 36, 0.08), 0 1px 2px rgba(20, 24, 36, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 24, 36, 0.08), 0 2px 4px rgba(20, 24, 36, 0.04);
  --shadow-lg: 0 12px 28px rgba(20, 24, 36, 0.10), 0 4px 8px rgba(20, 24, 36, 0.05);
  --shadow-xl: 0 24px 56px rgba(20, 24, 36, 0.14), 0 8px 16px rgba(20, 24, 36, 0.06);
  --shadow-accent: 0 8px 24px color-mix(in oklch, var(--violet-500) 28%, transparent);

  /* ==========================================================================
     7. MOTION — calm, precise. No bounce. Confident ease-out.
     ========================================================================== */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

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

/* ============================================================================
   SEMANTIC TYPE CLASSES — apply directly or mirror in components
   ============================================================================ */
.display-1 { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-5xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.display-2 { font-family: var(--font-display); font-weight: var(--fw-bold);  font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.h1 { font-family: var(--font-display); font-weight: var(--fw-bold);     font-size: var(--text-3xl); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--fg-1); }
.h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--fg-1); }
.h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-xl);  line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--fg-1); }
.h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-lg);  line-height: var(--lh-snug); color: var(--fg-1); }
.body-lg { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-md);   line-height: var(--lh-relaxed); color: var(--fg-2); }
.body    { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-base); line-height: var(--lh-normal);  color: var(--fg-2); }
.body-sm { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-sm);   line-height: var(--lh-normal);  color: var(--fg-2); }
.caption { font-family: var(--font-body); font-weight: var(--fw-medium);  font-size: var(--text-xs);   line-height: var(--lh-normal);  color: var(--fg-3); }
.eyebrow { font-family: var(--font-mono); font-weight: var(--fw-medium);  font-size: var(--text-xs);   line-height: 1; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-fg); }
.code    { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--text-sm);   line-height: var(--lh-normal); color: var(--fg-1); }
.label   { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-sm); line-height: 1.2; color: var(--fg-1); }