/**
 * Made Thought — colors_and_type.css
 * The complete foundation: fonts, color vars, type scale, semantic styles.
 *
 * MT is a two-typeface, two-color system:
 *   Items MT Light (display)  · Futura PT Book (UI/body)
 *   Black                     · White
 * Distinction comes from typography, layout, and restraint — not colour.
 */

/* ─── Fonts ──────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Items MT';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/ItemsMT-Light.otf') format('opentype');
}
@font-face {
  font-family: 'Items MT';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/ItemsMT-LightItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Futura PT';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/futura-pt_book.otf') format('opentype');
}
@font-face {
  font-family: 'Futura PT';
  font-style: oblique;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/futura-pt_book-oblique.otf') format('opentype');
}

/* ─── Color tokens ───────────────────────────────────────────────────────── */

:root,
[data-theme="light"] {
  /* Semantic surface */
  --color-surface: #ffffff;
  --color-ink: #000000;
  --color-ink-subtle: rgba(102, 102, 102, 0.4);
  --color-divider: rgba(235, 235, 235, 0.92);

  /* Aliases used across UI/slides */
  --bg: var(--color-surface);
  --fg1: var(--color-ink);
  --fg2: var(--color-ink-subtle);
  --rule: var(--color-ink);
  --card: var(--color-divider);

  /* Static palette — never swaps */
  --palette-white: #ffffff;
  --palette-black: #000000;
  --palette-ink-2d: #2d2d2d;       /* darker ink, used 54× in figma */
  --palette-stone: #e0ddd5;        /* warm off-white accent (16×) */
  --palette-hairline: #ebebeb;     /* thin rules */
}

[data-theme="dark"] {
  --color-surface: #000000;
  --color-ink: #ffffff;
  --color-ink-subtle: rgba(153, 153, 153, 0.6);
  --color-divider: rgba(31, 31, 31, 0.12);

  --bg: var(--color-surface);
  --fg1: var(--color-ink);
  --fg2: var(--color-ink-subtle);
  --rule: var(--color-ink);
  --card: var(--color-divider);
}

/* ─── Type scale (1920×1080 canvas) ──────────────────────────────────────── */

:root {
  --font-display: 'Items MT', 'Cormorant Garamond', 'Georgia', serif;
  --font-ui:      'Futura PT', 'Futura', 'Helvetica Neue', 'Arial', sans-serif;

  --weight-light: 300;
  --weight-book:  400;
  --weight-demi:  600;

  /* Slide scale */
  --text-display-mega: 180px;
  --text-display-xl:    68px;
  --text-display-m:     46px;
  --text-page-title:    22px;
  --text-eyebrow:       22px;
  --text-body:          28px;
  --text-footer:        12px;

  /* Tracking */
  --tracking-display: -0.01em;
  --tracking-ui:       0.08em;
  --tracking-body:     0;

  /* ─── Spacing & slide geometry (mirrors tokens/spacing.css) ────────────── */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  60px;
  --space-8:  80px;
  --space-9: 120px;
  --space-10: 160px;

  --slide-width:         1920px;
  --slide-height:        1080px;
  --slide-padding-x:     60px;
  --slide-padding-y:     60px;
  --slide-content-width: 1800px;
  --slide-gap-major:     80px;
  --slide-gap-minor:     24px;

  --footer-height: 14px;
  --footer-width:  1800px;
}

/* ─── Semantic type classes ──────────────────────────────────────────────── */

.text-display-mega {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-display-mega);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--fg1);
}
.text-display-xl {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-display-xl);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  color: var(--fg1);
}
.text-display-m {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-display-m);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--fg1);
}
.text-page-title,
.text-eyebrow {
  font-family: var(--font-ui);
  font-weight: var(--weight-book);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-ui);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fg1);
}
.text-body {
  font-family: var(--font-ui);
  font-weight: var(--weight-book);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  line-height: 1.4;
  color: var(--fg1);
}
.text-footer {
  font-family: var(--font-ui);
  font-weight: var(--weight-book);
  font-size: var(--text-footer);
  letter-spacing: var(--tracking-ui);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg2);
}

/* ─── Plain-HTML semantic bindings ───────────────────────────────────────── */
/* Use these when writing prose / docs outside of slide canvases.            */

html { color: var(--fg1); background: var(--bg); }
body {
  font-family: var(--font-ui);
  font-weight: var(--weight-book);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg1);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  margin: 0 0 0.4em;
}
h1 { font-size: 56px; }
h2 { font-size: 40px; }
h3 { font-size: 28px; }
h4 { font-size: 20px; }
.eyebrow, .kicker {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  font-size: 12px;
}
p { max-width: 64ch; }
small { font-size: 12px; letter-spacing: var(--tracking-ui); text-transform: uppercase; color: var(--fg2); }
hr { border: 0; height: 1px; background: var(--rule); margin: var(--space-6) 0; }