/* ───────────────────────────────────────────────────────────────
   OG LABS DESIGN ACADEMY — Foundation Tokens
   Brutalist / Editorial / Technological
   Extracted from krigrv/Oglabsacademy repo (src/styles/theme.css + fonts.css)
   ─────────────────────────────────────────────────────────────── */

/* ── Local brand fonts ───────────────────────────────────────────
   DM Serif Display & JetBrains Mono are shipped locally (see fonts/).
   Inter + Archivo remain on Google Fonts — they're supporting roles.
   ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Archivo:wght@700;800;900&display=swap');

/* DM Serif Display — editorial voice */
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* JetBrains Mono — full weight range, roman + italic */
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Thin.ttf') format('truetype');             font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ThinItalic.ttf') format('truetype');       font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraLight.ttf') format('truetype');       font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Light.ttf') format('truetype');            font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-LightItalic.ttf') format('truetype');      font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');          font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Italic.ttf') format('truetype');           font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype');           font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-MediumItalic.ttf') format('truetype');     font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-SemiBold.ttf') format('truetype');         font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-SemiBoldItalic.ttf') format('truetype');   font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Bold.ttf') format('truetype');             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-BoldItalic.ttf') format('truetype');       font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraBold.ttf') format('truetype');        font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-ExtraBoldItalic.ttf') format('truetype');  font-weight: 800; font-style: italic; font-display: swap; }

:root {
  /* ── Core palette (the three colors of the brand) ───────────── */
  --og-ink:        #0A0A0A;  /* pure black — foreground, ink, borders */
  --og-paper:      #FAFAF6;  /* off-white — background, paper */
  --og-signal:     #FE1300;  /* terminal red — accent, only color */

  /* ── Tints (derived, for hierarchy inside dark/light fills) ─── */
  --og-ink-85:     rgba(10, 10, 10, 0.85);
  --og-ink-65:     rgba(10, 10, 10, 0.65);
  --og-ink-45:     rgba(10, 10, 10, 0.45);
  --og-ink-25:     rgba(10, 10, 10, 0.25);
  --og-ink-12:     rgba(10, 10, 10, 0.12);
  --og-ink-06:     rgba(10, 10, 10, 0.06);

  --og-paper-85:   rgba(250, 250, 246, 0.85);
  --og-paper-65:   rgba(250, 250, 246, 0.65);
  --og-paper-45:   rgba(250, 250, 246, 0.45);
  --og-paper-25:   rgba(250, 250, 246, 0.25);
  --og-paper-15:   rgba(250, 250, 246, 0.15);
  --og-paper-04:   rgba(250, 250, 246, 0.04);

  --og-signal-hover: #d91100;  /* darker red, used on button hover */

  /* ── Semantic (light surface — default) ──────────────────────── */
  --bg:            var(--og-paper);
  --bg-inverse:    var(--og-ink);
  --fg:            var(--og-ink);
  --fg-muted:      var(--og-ink-65);
  --fg-faint:      var(--og-ink-45);
  --fg-trace:      var(--og-ink-25);
  --border:        var(--og-ink);
  --border-dashed: var(--og-ink-12);
  --accent:        var(--og-signal);
  --accent-hover:  var(--og-signal-hover);

  /* ── Type families ───────────────────────────────────────────── */
  --font-serif:    'DM Serif Display', 'Playfair Display', Georgia, serif;
  --font-mono:     'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --font-sans:     'Inter', system-ui, -apple-system, sans-serif;
  --font-logo:     'Archivo', 'Inter', system-ui, sans-serif;

  /* ── Scale (1920 canvas baseline; rem ok for web) ───────────── */
  --text-9:        9px;    /* micro metadata — "// SECTION" ultra-small */
  --text-10:       10px;   /* the canonical mono label size */
  --text-11:       11px;
  --text-xs:       12px;
  --text-sm:       14px;
  --text-base:     16px;
  --text-lg:       18px;
  --text-xl:       20px;
  --text-2xl:      24px;
  --text-3xl:      30px;
  --text-4xl:      36px;
  --text-5xl:      48px;
  --text-6xl:      64px;
  --text-hero:     clamp(3rem, 7vw, 6rem);  /* hero masthead */

  /* ── Tracking (letter-spacing) — this brand lives on tracking ── */
  --track-tight:      -0.02em;  /* serif headlines */
  --track-normal:      0em;
  --track-wide:        0.15em;
  --track-wider:       0.2em;    /* button labels */
  --track-widest:      0.25em;
  --track-brutal-1:    0.28em;
  --track-brutal-2:    0.3em;    /* most mono labels */
  --track-brutal-3:    0.32em;
  --track-brutal-4:    0.35em;   /* masthead rails */

  /* ── Weights ──────────────────────────────────────────────────── */
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ── Line heights ────────────────────────────────────────────── */
  --lh-tight:     0.92;   /* hero serif */
  --lh-snug:      1.05;   /* section headlines */
  --lh-base:      1.45;
  --lh-body:      1.58;

  /* ── Spacing scale ───────────────────────────────────────────── */
  --space-0:      0;
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-7:      28px;
  --space-8:      32px;
  --space-10:     40px;
  --space-12:     48px;
  --space-16:     64px;
  --space-20:     80px;
  --space-24:     96px;
  --space-32:     128px;

  /* ── Borders — deliberately loud ─────────────────────────────── */
  --border-hair:   1px;
  --border-rule:   2px;        /* the signature brutalist rule */
  --border-heavy:  4px;        /* section dividers (e.g. red top rule) */
  --radius-none:   0;
  --radius-sm:     2px;
  --radius-md:     6px;
  --radius-lg:     10px;       /* 0.625rem — shadcn base; used on form ui */

  /* ── Shadows — ONLY offset hard shadows, no blur ─────────────── */
  --shadow-brut-sm:   2px 2px 0 var(--og-ink);
  --shadow-brut-md:   4px 4px 0 var(--og-ink);
  --shadow-brut-lg:   6px 6px 0 var(--og-ink);
  --shadow-signal-sm: 2px 2px 0 var(--og-signal);
  --shadow-signal-md: 4px 4px 0 rgba(254, 19, 0, 0.35);
  --shadow-signal-lg: 6px 6px 0 rgba(254, 19, 0, 0.55);

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       400ms;
}

/* ── Dark surface override (used by hero and footer strips) ─── */
.og-dark {
  --bg:            var(--og-ink);
  --bg-inverse:    var(--og-paper);
  --fg:            var(--og-paper);
  --fg-muted:      var(--og-paper-65);
  --fg-faint:      var(--og-paper-45);
  --fg-trace:      var(--og-paper-25);
  --border:        var(--og-paper);
  --border-dashed: var(--og-paper-15);
}

/* ═══════════════════════════════════════════════════════════════
   Base typography — elements map to semantic classes
   Use the classes; elements have sane defaults too.
   ═══════════════════════════════════════════════════════════════ */

html { font-size: 16px; }
body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* Editorial serif headlines — DM Serif Display is the voice of the brand. */
.og-h-hero {
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: var(--fw-normal);
}
.og-h1 {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}
.og-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  line-height: 1.08;
  letter-spacing: var(--track-tight);
}
.og-h3 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: var(--track-tight);
}
.og-h-editorial-italic { font-style: italic; color: var(--accent); }

/* Body */
.og-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--fg);
}
.og-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--fg-muted);
}

/* Mono — structural microcopy. The engineered feel of the brand. */
.og-label,
.og-tag {
  font-family: var(--font-mono);
  font-size: var(--text-10);
  letter-spacing: var(--track-brutal-2);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.og-label-signal { color: var(--accent); }
.og-label-faint  { color: var(--fg-faint); }

.og-annotation {
  font-family: var(--font-mono);
  font-size: var(--text-9);
  letter-spacing: var(--track-brutal-2);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.og-btn-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}

/* Structural slashes — visual prefix convention "// LABEL" */
.og-slashes::before { content: "// "; color: var(--accent); }

/* Selection */
::selection { background: var(--og-signal); color: var(--og-paper); }