/* ============================================================
   soterocra.dev — Colors & Type Tokens
   ------------------------------------------------------------
   Two themes: [data-theme="light"] (default) and [data-theme="dark"].
   The base palette is fixed; semantic tokens swap per theme.
   ============================================================ */

/* ---------- Web fonts ----------
   Primary: JetBrains Mono — monospace, excellent for code AND for reading
   bigger blocks (headlines, brand wordmark). Self-hosted (TTF in /fonts).
   Secondary: Inter — humanist sans for dense UI body copy. Google Fonts.
*/
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     BRAND PALETTE — sourced from the original PPT deck.
     Slide colors observed: 2D65E8, 19C258, F5B800, EA8F29, FFAF5B
     ============================================================ */
  --brand-blue:        #2D65E8;   /* primary signal — links, focus, accent */
  --brand-blue-deep:   #184AC1;   /* hover / pressed */
  --brand-blue-soft:   #5B8DF0;   /* dark-theme accent (lifted contrast) */
  --brand-green:       #19C258;   /* secondary signal — success, nodes */
  --brand-green-deep:  #109544;
  --brand-green-soft:  #22D866;   /* dark-theme accent */
  --brand-yellow:      #F5B800;   /* highlight — attention, warnings */
  --brand-orange:      #EA8F29;   /* accent — CTAs, callouts */
  --brand-orange-soft: #FFAF5B;   /* lighter orange seen in deck */

  /* ============================================================
     NEUTRAL RAMP — engineered for both themes.
     0 = pure surface, 12 = pure ink. Use semantic tokens, not these.
     ============================================================ */
  --ink-0:  #FFFFFF;
  --ink-1:  #FAFBFC;
  --ink-2:  #F2F4F7;
  --ink-3:  #E4E7EC;
  --ink-4:  #CDD2DA;
  --ink-5:  #98A2B3;
  --ink-6:  #667085;
  --ink-7:  #475467;
  --ink-8:  #344054;
  --ink-9:  #1D2939;
  --ink-10: #101828;
  --ink-11: #0E1116;
  --ink-12: #000000;

  /* ============================================================
     RADIUS, SHADOW, SPACING
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* Shadows are kept restrained — engineering brand, not glassmorphism. */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, .12), 0 4px 8px -2px rgba(16, 24, 40, .04);
  --shadow-focus: 0 0 0 3px rgba(45, 101, 232, .35);

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* JetBrains Mono is the BRAND face. Use it for headings, marks, terminal-y
     things. Inter is for paragraphs, forms, and dense UI. */
  --font-display: var(--font-mono);
  --font-ui:      var(--font-sans);
  --font-code:    var(--font-mono);

  /* Type scale — tuned for ~16px base. Mono runs ~5% larger optically, so
     display sizes are slightly tighter on letter-spacing. */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  60px;
  --fs-5xl:  80px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;   /* eyebrow / SECTION labels */
}

/* ============================================================
   LIGHT THEME (default)
   ============================================================ */
:root,
[data-theme="light"] {
  --bg:           var(--ink-0);
  --bg-subtle:    var(--ink-1);
  --bg-muted:     var(--ink-2);
  --bg-inverse:   var(--ink-11);

  --surface:      var(--ink-0);
  --surface-raised: var(--ink-0);
  --surface-sunken: var(--ink-2);
  --surface-code: #0E1116;       /* code blocks always inverted */

  --border:       var(--ink-3);
  --border-strong: var(--ink-4);
  --border-focus: var(--brand-blue);

  --fg-1:         var(--ink-11);  /* primary text */
  --fg-2:         var(--ink-8);   /* secondary text */
  --fg-3:         var(--ink-6);   /* muted, captions */
  --fg-4:         var(--ink-5);   /* placeholder */
  --fg-on-brand:  #FFFFFF;
  --fg-on-code:   #E4E7EC;

  --accent:        var(--brand-blue);
  --accent-hover:  var(--brand-blue-deep);
  --accent-soft:   color-mix(in srgb, var(--brand-blue) 12%, transparent);

  --success:       var(--brand-green-deep);
  --success-soft:  color-mix(in srgb, var(--brand-green) 14%, transparent);
  --warning:       var(--brand-orange);
  --warning-soft:  color-mix(in srgb, var(--brand-yellow) 22%, transparent);
  --danger:        #D92D20;
  --danger-soft:   color-mix(in srgb, #D92D20 12%, transparent);

  /* Syntax highlighting — used in code blocks regardless of UI theme */
  --syn-bg:        #0E1116;
  --syn-fg:        #E4E7EC;
  --syn-comment:   #667085;
  --syn-keyword:   #5B8DF0;
  --syn-string:    #22D866;
  --syn-number:    #F5B800;
  --syn-fn:        #FFAF5B;
  --syn-type:      #5B8DF0;
  --syn-punct:     #98A2B3;
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --bg:           var(--ink-11);
  --bg-subtle:    #14181F;
  --bg-muted:     #1A1F28;
  --bg-inverse:   var(--ink-0);

  --surface:      #14181F;
  --surface-raised: #1A1F28;
  --surface-sunken: #0A0D11;
  --surface-code: #0A0D11;

  --border:       #232934;
  --border-strong: #313846;
  --border-focus: var(--brand-blue-soft);

  --fg-1:         #F2F4F7;
  --fg-2:         #CDD2DA;
  --fg-3:         #98A2B3;
  --fg-4:         #667085;
  --fg-on-brand:  #0E1116;
  --fg-on-code:   #E4E7EC;

  --accent:        var(--brand-blue-soft);
  --accent-hover:  #82A6F4;
  --accent-soft:   color-mix(in srgb, var(--brand-blue-soft) 18%, transparent);

  --success:       var(--brand-green-soft);
  --success-soft:  color-mix(in srgb, var(--brand-green-soft) 18%, transparent);
  --warning:       var(--brand-orange-soft);
  --warning-soft:  color-mix(in srgb, var(--brand-yellow) 18%, transparent);
  --danger:        #F97066;
  --danger-soft:   color-mix(in srgb, #F97066 18%, transparent);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.25);
  --shadow-lg: 0 12px 24px -6px rgba(0,0,0,.55), 0 4px 8px -2px rgba(0,0,0,.25);
  --shadow-focus: 0 0 0 3px rgba(91,141,240,.45);
}

/* Auto-switch based on system pref when no explicit theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:           #0E1116;
    --bg-subtle:    #14181F;
    --bg-muted:     #1A1F28;
    --surface:      #14181F;
    --surface-raised: #1A1F28;
    --surface-sunken: #0A0D11;
    --border:       #232934;
    --border-strong: #313846;
    --fg-1:         #F2F4F7;
    --fg-2:         #CDD2DA;
    --fg-3:         #98A2B3;
    --fg-4:         #667085;
    --fg-on-brand:  #0E1116;
    --accent:       var(--brand-blue-soft);
    --accent-hover: #82A6F4;
  }
}

/* ============================================================
   SEMANTIC TYPE — apply directly with class or use as a guide.
   ============================================================ */
.eyebrow,
[data-type="eyebrow"] {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.h1, [data-type="h1"] {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-1);
}
.h2, [data-type="h2"] {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-1);
}
.h3, [data-type="h3"] {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg-1);
}
.h4, [data-type="h4"] {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-1);
}

.p, [data-type="p"] {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}
.lead, [data-type="lead"] {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.small, [data-type="small"] {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.code, [data-type="code"] {
  font-family: var(--font-code);
  font-size: 0.92em;
  font-feature-settings: "calt" 1, "liga" 1;  /* JBM ligatures */
  background: var(--bg-muted);
  color: var(--fg-1);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}

pre.codeblock, [data-type="codeblock"] {
  font-family: var(--font-code);
  font-size: var(--fs-sm);
  line-height: 1.6;
  font-feature-settings: "calt" 1, "liga" 1;
  background: var(--syn-bg);
  color: var(--syn-fg);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow: auto;
}

.brand-mark, [data-type="brand"] {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.brand-mark .tld, [data-type="brand"] .tld {
  color: var(--accent);
}

/* Selection */
::selection {
  background: var(--accent-soft);
  color: var(--fg-1);
}