/* ═══════════════════════════════════════════════════════════════
   MOREMEDIA® Master AI — Colors & Type
   Source-of-truth tokens for all four surfaces.
   Light is the default. Dark via [data-theme="dark"].
═══════════════════════════════════════════════════════════════ */

/* ── Web fonts (local woff2) ──────────────────────────────── */
@font-face {
  font-family: 'Scto Grotesk A';
  src: url('fonts/SctoGroteskA-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Scto Grotesk A';
  src: url('fonts/SctoGroteskA-RegularItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Scto Grotesk A';
  src: url('fonts/SctoGroteskA-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Scto Grotesk A';
  src: url('fonts/SctoGroteskA-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Scto Grotesk A';
  src: url('fonts/SctoGroteskA-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Light (default) ──────────────────────────────────────── */
:root {
  /* Type families — Scto Grotesk A for UI/display, JetBrains Mono for code/metrics */
  --font-ui:      'Scto Grotesk A', system-ui, sans-serif;
  --font-display: 'Scto Grotesk A', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --t-xs:   11px;
  --t-sm:   12px;
  --t-base: 14px;
  --t-md:   15px;
  --t-lg:   17px;
  --t-xl:   20px;
  --t-2xl:  26px;
  --t-3xl:  32px;
  --t-disp: 52px;

  /* Backgrounds — warm stone */
  --bg-base:    #F7F6F2;  /* page */
  --bg-surface: #FFFFFF;  /* card / sidebar / header */
  --bg-el:      #F0EDE6;  /* elevated rows, code, inset */
  --bg-ov:      #E8E4DA;  /* overlay, table header */
  --bg-sunken:  #EFECE3;  /* sunken inset (rails, prompts) */

  /* Borders — warm dark brown at low opacity, never neutral gray */
  --bdr-faint:  rgba(40,35,20,0.07);
  --bdr-def:    rgba(40,35,20,0.13);
  --bdr-str:    rgba(40,35,20,0.22);

  /* Text */
  --tx-0: #1C1917;   /* primary */
  --tx-1: #4A4540;   /* secondary */
  --tx-2: #8A8478;   /* muted, label */

  /* Accent (active nav, focus) */
  --ac-0:  #7A756E;
  --ac-1:  #5A5550;
  --ac-2:  #1C1917;
  --ac-bg: rgba(90,85,80,0.06);

  /* Semantic — fg + bg tint + border triplets */
  --ok:  #1A7B52; --ok-bg:  rgba(26,123,82,0.08);  --ok-bd:  rgba(26,123,82,0.22);
  --wa:  #A06020; --wa-bg:  rgba(160,96,32,0.08);  --wa-bd:  rgba(160,96,32,0.22);
  --er:  #A83030; --er-bg:  rgba(168,48,48,0.08);  --er-bd:  rgba(168,48,48,0.22);
  --inf: #2B6CB0; --inf-bg: rgba(43,108,176,0.08); --inf-bd: rgba(43,108,176,0.22);

  /* Spacing scale */
  --sp-xs:  2px;
  --sp-sm:  6px;
  --sp-md:  14px;
  --sp-lg:  22px;
  --sp-xl:  32px;
  --sp-2xl: 48px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 10px;

  color-scheme: light;
}

/* ── Dark — [data-theme="dark"] ───────────────────────────── */
[data-theme="dark"] {
  --bg-base:    #181715;
  --bg-surface: #222018;
  --bg-el:      #2C2923;
  --bg-ov:      #383428;
  --bg-sunken:  #1F1D19;

  --bdr-faint:  rgba(210,200,180,0.05);
  --bdr-def:    rgba(210,200,180,0.14);
  --bdr-str:    rgba(210,200,180,0.26);

  --tx-0: #EDE8E0;
  --tx-1: #B0A898;
  --tx-2: #787060;

  --ac-0:  #A8A09A;
  --ac-1:  #C4BEB6;
  --ac-2:  #DAD4CC;
  --ac-bg: rgba(196,190,182,0.07);

  --ok:  #3DB87A; --ok-bg:  rgba(61,184,122,0.07);  --ok-bd:  rgba(61,184,122,0.18);
  --wa:  #C4853A; --wa-bg:  rgba(196,133,58,0.07);  --wa-bd:  rgba(196,133,58,0.18);
  --er:  #C85050; --er-bg:  rgba(200,80,80,0.07);   --er-bd:  rgba(200,80,80,0.18);
  --inf: #5A8AC0; --inf-bg: rgba(90,138,192,0.07);  --inf-bd: rgba(90,138,192,0.18);

  color-scheme: dark;
}

/* ── Semantic element styles ─────────────────────────────── */
body {
  font-family: var(--font-ui);
  background: var(--bg-base);
  color: var(--tx-0);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 { font-family: var(--font-ui); font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--tx-0); }
h2 { font-family: var(--font-ui); font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--tx-0); }
h3 { font-family: var(--font-ui); font-size: var(--t-xl);  font-weight: 500; color: var(--tx-0); }
h4 { font-family: var(--font-ui); font-size: var(--t-lg);  font-weight: 500; color: var(--tx-0); }
p  { color: var(--tx-1); line-height: 1.65; }
strong, b { font-weight: 700; color: var(--tx-0); }
em, i     { font-style: italic; }
code, pre { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-el); border-radius: var(--r-sm); }

/* Hero / display — Scto Grotesk A Bold at large size with tight tracking */
.display {
  font-family: var(--font-display);
  font-size: var(--t-disp);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Section labels — 11px, 500, uppercase, ls 0.08–0.09em, tx-2 */
.label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tx-2);
}

/* Mono-style metric values */
.metric {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--tx-0);
}