/* ============================================================
   PRISMA · colors_and_type.css
   Single source of truth for color, type, spacing, radius,
   shadow, and brand @font-face rules.
   Sourced 1:1 from the Prisma Figma library + semantic token JSON.
   Default color mode: DARK. Brand color: TEAL (#2DD4BF).
   Load this once per page.
   ============================================================ */

/* ─── Brand fonts ───────────────────────────────────────── */
/* Mona Sans variable — wdth 75–125, wght 200–900.
   Brand display = wdth 125 / wght 900.                      */
@font-face {
  font-family: 'Mona Sans';
  src: url('fonts/MonaSans-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/MonaSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans';
  src: url('fonts/MonaSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/MonaSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

/* Inter body — local variable file. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono — code, eyebrows, data. Self-hosted variable file. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ─── Raw scales (Tailwind-aligned) ─────────────────────── */
:root {
  --teal-50:  #F0FDFA;
  --teal-100: #CCFBF1;
  --teal-200: #99F6E4;
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;
  --teal-700: #0F766E;
  --teal-800: #115E59;
  --teal-900: #134E4A;
  --teal-950: #042F2E;

  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-900: #312E81;
  --indigo-950: #1E1B4B;

  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --gray-950: #030712;

  --red-300: #FCA5A5;   --red-400: #F87171;   --red-500: #EF4444;
  --red-900: #7F1D1D;   --red-950: #450A0A;
  --orange-300: #FDBA74;--orange-400: #FB923C;--orange-500: #F97316;
  --orange-900: #7C2D12;--orange-950: #431407;

  /* ─── Typography scale ─────────────────────────────── */
  --font-display: 'Mona Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Brand display variation — always wide + heavy */
  --mona-display: 'wdth' 125, 'wght' 900; /* @kind font */
  --mona-heading: 'wdth' 125, 'wght' 700; /* @kind font */

  --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px;  --text-md: 16px;
  --text-lg:  18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px;
  --text-4xl: 36px; --text-5xl: 48px; --text-6xl: 60px; --text-7xl: 72px;

  --lh-2xs: 16px; --lh-xs: 16px;   --lh-sm: 20px; --lh-md: 24px;
  --lh-lg:  28px; --lh-xl: 28px;   --lh-2xl: 32px;--lh-3xl: 36px;
  --lh-4xl: 40px; --lh-5xl: 48px;  --lh-6xl: 56px;

  /* ─── Radius ─────────────────────────────────────────── */
  --radius-low:  3px;
  --radius:      6px;
  --radius-high: 12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ─── Shadows (from effect tokens) ──────────────────── */
  --shadow-low:  0 1px 2px rgba(0,0,0,.04);
  --shadow:      0 2px 2px rgba(0,0,0,.04), 0 8px 8px -8px rgba(0,0,0,.04);
  --shadow-high: 0 2px 2px rgba(0,0,0,.04), 0 8px 16px -4px rgba(0,0,0,.04);
  --shadow-glow-teal: 0 0 0 1px rgba(45,212,191,.35), 0 10px 28px -6px rgba(45,212,191,.25);

  /* ─── Elevation ramp (drop-shadow depth, dark-default) ─── */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0,0,0,.5);
  --elevation-2: 0 4px 10px -2px rgba(0,0,0,.55);
  --elevation-3: 0 12px 26px -6px rgba(0,0,0,.6);
  --elevation-4: 0 22px 48px -10px rgba(0,0,0,.66);

  /* ─── Spacing (gap scale, base 4px) ──────────────────── */
  --gap-1: 4px;   --gap-2: 8px;   --gap-3: 12px;  --gap-4: 16px;
  --gap-5: 20px;  --gap-6: 24px;  --gap-7: 28px;  --gap-8: 32px;
  --gap-10: 40px; --gap-12: 48px; --gap-16: 64px; --gap-20: 80px;
  --gap-24: 96px;
}

/* ─── Semantic · DARK (default) ──────────────────────────── */
/* Applies at :root AND on any [data-theme="dark"] island inside a light page
   (e.g. a code block, which is always dark). */
:root, [data-theme="dark"] {
  /* Backgrounds */
  --bg:                     var(--gray-950);
  --bg-neutral-strong:      var(--gray-700);
  --bg-neutral:             var(--gray-800);
  --bg-neutral-weak:        var(--gray-900);
  --bg-neutral-weaker:      #0A101D;
  --bg-neutral-reverse:     var(--gray-100);
  --bg-neutral-reverse-strong: var(--gray-50);

  --bg-ppg:                 var(--teal-950);
  --bg-ppg-strong:          var(--teal-900);
  --bg-ppg-reverse:         var(--teal-500);
  --bg-ppg-reverse-strong:  var(--teal-400);

  --bg-orm:                 var(--indigo-950);
  --bg-orm-strong:          var(--indigo-900);
  --bg-orm-reverse:         var(--indigo-500);
  --bg-orm-reverse-strong:  var(--indigo-400);

  --bg-error:               var(--red-950);
  --bg-error-strong:        var(--red-900);
  --bg-warning:             var(--orange-950);
  --bg-warning-strong:      var(--orange-900);
  --bg-success:             var(--teal-950);
  --bg-success-strong:      var(--teal-900);

  /* Foregrounds */
  --fg:                     var(--gray-50);
  --fg-weak:                var(--gray-400);
  --fg-weaker:              var(--gray-500);
  --fg-reverse:             var(--gray-950);
  --fg-reverse-weak:        var(--gray-600);

  --fg-ppg-strong:          var(--teal-300);
  --fg-ppg:                 var(--teal-400);
  --fg-ppg-weak:            var(--teal-500);
  --fg-ppg-reverse:         var(--gray-50);
  --fg-ppg-reverse-weak:    var(--teal-200);

  --fg-orm-strong:          var(--indigo-300);
  --fg-orm:                 var(--indigo-400);
  --fg-orm-weak:            var(--indigo-500);
  --fg-orm-reverse:         var(--gray-50);

  --fg-error:               var(--red-400);
  --fg-warning:             var(--orange-400);
  --fg-success:             var(--teal-400);

  /* Strokes */
  --stroke-stronger:        var(--gray-50);
  --stroke-strong:          var(--gray-700);
  --stroke:                 var(--gray-800);
  --stroke-weak:            var(--gray-900);

  --stroke-ppg-strong:      var(--teal-200);
  --stroke-ppg:             var(--teal-400);
  --stroke-ppg-weak:        var(--teal-800);
  --stroke-orm:             var(--indigo-400);
}

/* ─── Semantic · LIGHT (opt-in) ──────────────────────────── */
[data-theme="light"], .theme-light {
  --bg:                     #FFFFFF;
  --bg-neutral-strong:      var(--gray-200);
  --bg-neutral:             var(--gray-100);
  --bg-neutral-weak:        var(--gray-50);
  --bg-neutral-weaker:      #FCFDFD;
  --bg-neutral-reverse:     var(--gray-800);
  --bg-neutral-reverse-strong: var(--gray-900);

  --bg-ppg:                 var(--teal-50);
  --bg-ppg-strong:          var(--teal-100);
  --bg-ppg-reverse:         var(--teal-500);
  --bg-ppg-reverse-strong:  var(--teal-600);

  --bg-orm:                 var(--indigo-50);
  --bg-orm-strong:          var(--indigo-100);

  --bg-error:               #FEF2F2;
  --bg-warning:             #FFF7ED;
  --bg-success:             var(--teal-50);
  --fg-error:               #DC2626;
  --fg-warning:             #EA580C;
  --fg-success:             var(--teal-600);

  --fg:                     var(--gray-900);
  --fg-weak:                var(--gray-600);
  --fg-weaker:              var(--gray-500);
  --fg-reverse:             var(--gray-50);

  --fg-ppg-strong:          var(--teal-700);
  --fg-ppg:                 var(--teal-600);
  --fg-ppg-weak:            var(--teal-500);
  --fg-orm-strong:          var(--indigo-700);
  --fg-orm:                 var(--indigo-600);

  --stroke-stronger:        var(--gray-900);
  --stroke-strong:          var(--gray-300);
  --stroke:                 var(--gray-200);
  --stroke-weak:            var(--gray-100);
  --stroke-ppg-strong:      var(--teal-800);
  --stroke-ppg:             var(--teal-600);
  --stroke-ppg-weak:        var(--teal-200);

  /* Elevation ramp — softer on light surfaces */
  --elevation-1: 0 1px 2px rgba(16,24,40,.06);
  --elevation-2: 0 4px 10px -2px rgba(16,24,40,.10);
  --elevation-3: 0 12px 26px -6px rgba(16,24,40,.14);
  --elevation-4: 0 22px 48px -10px rgba(16,24,40,.18);
}

/* ─── Baseline ──────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--text-md);
  line-height: 1.5;
}

/* ─── Title scale ───────────────────────────────────────── */
/* Every heading ships in Mona Sans 125 wide, 900 black by default. */
h1, h2, h3, h4, h5,
.title-md, .title-lg, .title-xl,
.title-3xl, .title-4xl, .title-5xl, .title-6xl {
  font-family: var(--font-display);
  font-variation-settings: var(--mona-display);
  font-weight: 900;
  color: var(--fg);
  letter-spacing: -0.01em;
  font-synthesis: none;
}

.title-md  { font-size: var(--text-md);  line-height: var(--lh-md);  font-variation-settings: var(--mona-heading); font-weight: 700; letter-spacing: 0; }
.title-lg  { font-size: var(--text-xl);  line-height: var(--lh-lg);  font-variation-settings: var(--mona-heading); font-weight: 700; letter-spacing: 0; }
.title-xl  { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-variation-settings: var(--mona-heading); font-weight: 700; letter-spacing: 0; }
.title-3xl { font-size: var(--text-3xl); line-height: var(--lh-4xl); letter-spacing: -0.015em; } /* h2 */
.title-4xl { font-size: var(--text-5xl); line-height: var(--lh-5xl); letter-spacing: -0.02em;  } /* h1 */
.title-5xl { font-size: var(--text-6xl); line-height: var(--lh-6xl); letter-spacing: -0.025em; }
.title-6xl { font-size: var(--text-7xl); line-height: 72px;          letter-spacing: -0.03em;  }

/* Inter micro-label — secondary uppercase tag */
.heading-2xs {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--text-2xs); line-height: var(--lh-2xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-weak);
}

/* ─── Body text ─────────────────────────────────────────── */
.text-xs   { font-size: var(--text-xs); line-height: var(--lh-xs); }
.text-sm   { font-size: var(--text-sm); line-height: var(--lh-sm); }
.text-md   { font-size: var(--text-md); line-height: var(--lh-md); }
.text-lg   { font-size: var(--text-lg); line-height: var(--lh-lg); }

.text-weak   { color: var(--fg-weak); }
.text-weaker { color: var(--fg-weaker); }
.text-brand  { color: var(--fg-ppg); }

.code, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
}
pre { font-family: var(--font-mono); }

/* ─── Eyebrow — teal mono uppercase label ─────────────── */
/* No diamond/`+` prefix. Pair with a Phosphor glyph AFTER the text. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-ppg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ─── Bullet list — Phosphor arrow markers (not diamonds) ─ */
.bullets { list-style: none; padding: 0; }
.bullets li {
  position: relative;
  padding-left: 24px;
  line-height: 1.6;
  color: var(--fg);
}
.bullets li + li { margin-top: 8px; }
.bullets li::before {
  content: "\2192"; /* → arrow */
  position: absolute;
  left: 0; top: 0;
  color: var(--fg-ppg);
  font-weight: 700;
}