/* ============================================================
   Sondea Design System — core tokens
   Link this file in <head> on every page.

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ─── PRIMARY — violet ─────────────────────────────────────── */
  --violet-50:  #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #7C3AED;   /* gradient end / hover */
  --violet-600: #6D28D9;   /* PRIMARY brand */
  --violet-700: #5B21B6;   /* hover-on-primary */
  --violet-800: #4C1D95;
  --violet-900: #2E1065;

  /* ─── ACCENT — cyan ────────────────────────────────────────── */
  --cyan-50:  #ECFEFF;
  --cyan-100: #CFFAFE;
  --cyan-200: #A5F3FC;
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;     /* ACCENT brand */
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;

  /* ─── INK — near-blacks for dark surfaces ──────────────────── */
  --ink-950: #0B0B12;      /* dark hero / footer canvas */
  --ink-900: #131321;
  --ink-800: #1C1C2E;
  --ink-700: #262640;
  --ink-600: #34344F;

  /* ─── PAPER + slate (text on light) ────────────────────────── */
  --paper:     #F7F7FB;    /* light body background */
  --white:     #FFFFFF;
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ─── SEMANTIC ─────────────────────────────────────────────── */
  --success:    #10B981;   /* ACTIVA, success */
  --success-bg: #ECFDF5;
  --warning:    #F59E0B;   /* pending, warning */
  --warning-bg: #FFFBEB;
  --error:      #F43F5E;   /* error, INACTIVA */
  --error-bg:   #FFF1F2;
  --info:       #22D3EE;   /* uses accent */
  --info-bg:    #ECFEFF;

  /* ─── SEMANTIC ROLES (use these in components) ─────────────── */
  --fg-primary:        var(--slate-900);
  --fg-secondary:      var(--slate-600);
  --fg-muted:          var(--slate-400);
  --fg-inverse:        #FFFFFF;
  --fg-on-dark:        var(--slate-100);
  --fg-on-dark-muted:  var(--slate-400);
  --fg-accent:         var(--violet-600);
  --fg-link:           var(--violet-600);

  --bg-page:           var(--paper);
  --bg-surface:        var(--white);
  --bg-dark:           var(--ink-950);
  --bg-dark-elevated:  var(--ink-900);
  --bg-subtle:         var(--slate-50);

  --border-default:    var(--slate-200);
  --border-strong:     var(--slate-300);
  --border-dark:       rgba(255,255,255,.08);
  --border-dark-strong:rgba(255,255,255,.16);
  --border-focus:      var(--violet-500);

  /* ─── GRADIENTS ────────────────────────────────────────────── */
  --gradient-brand: linear-gradient(135deg, #6D28D9 0%, #7C3AED 45%, #22D3EE 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(109,40,217,.85) 0%, rgba(124,58,237,.7) 45%, rgba(34,211,238,.6) 100%);
  --gradient-hero: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(124,58,237,.35), transparent 60%),
                   radial-gradient(ellipse 60% 80% at 10% 80%, rgba(34,211,238,.22), transparent 60%),
                   linear-gradient(180deg, #0B0B12 0%, #131321 100%);
  --gradient-cta-band: linear-gradient(95deg, #2E1065 0%, #6D28D9 40%, #7C3AED 70%, #22D3EE 110%);

  /* ─── TYPOGRAPHY ───────────────────────────────────────────── */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Font sizes — fluid for hero, fixed for the rest */
  --fs-display-1: clamp(48px, 7vw, 88px);
  --fs-display-2: clamp(40px, 5.5vw, 64px);
  --fs-h1:        clamp(36px, 4.5vw, 56px);
  --fs-h2:        clamp(28px, 3.2vw, 40px);
  --fs-h3:        clamp(22px, 2.2vw, 28px);
  --fs-h4:        20px;
  --fs-h5:        18px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-micro:     12px;
  --fs-eyebrow:   12px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0;
  --ls-eyebrow: 0.14em;

  /* ─── SPACING (8px grid) ───────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 120px;
  --s-14: 160px;

  --container-max: 1200px;
  --container-pad: 24px;
  --section-y-desktop: 120px;
  --section-y-mobile:  64px;

  /* ─── RADII ────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;

  /* ─── SHADOWS ──────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(11,11,18,.06);
  --shadow-md:   0 4px 12px rgba(11,11,18,.06), 0 1px 2px rgba(11,11,18,.04);
  --shadow-lg:   0 12px 32px rgba(11,11,18,.08), 0 2px 6px rgba(11,11,18,.04);
  --shadow-xl:   0 24px 64px rgba(11,11,18,.12), 0 4px 12px rgba(11,11,18,.06);
  --shadow-glow: 0 0 0 1px rgba(124,58,237,.18), 0 8px 24px rgba(124,58,237,.18);
  --shadow-glow-cyan: 0 0 0 1px rgba(34,211,238,.24), 0 8px 24px rgba(34,211,238,.20);
  --shadow-inner-dark: inset 0 0 0 1px rgba(255,255,255,.06);

  /* ─── MOTION ───────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(.2,.7,.2,1);
  --ease-snap: cubic-bezier(.5,0,.2,1);
  --dur-tap:   120ms;
  --dur-hover: 200ms;
  --dur-entry: 320ms;
  --dur-hero:  720ms;

  /* ─── Z-INDEX ──────────────────────────────────────────────── */
  --z-nav:    100;
  --z-modal:  200;
  --z-toast:  300;
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply these via class
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
}

* { box-sizing: border-box; }

.display-1, h1.display, .hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 600;
  text-wrap: balance;
}

.display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 600;
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 600;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: 600;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0 0 var(--s-3);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--s-4);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.body-lg, .lead {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--violet-600);
}

.eyebrow.on-dark { color: var(--cyan-400); }

code, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "calt" 0;
  font-size: 0.92em;
}

pre {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  padding: var(--s-5);
  border-radius: var(--radius-md);
  background: var(--ink-900);
  color: var(--slate-100);
  overflow-x: auto;
}

a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.text-mono-tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }

/* Utility */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Selection */
::selection {
  background: var(--violet-200);
  color: var(--violet-900);
}