/* ============================================================
   GTM OS · Design Tokens
   v1.0 / april 2026
   Single accent (amber). Dark mode default. IBM Plex only.
   ============================================================ */

/* -------- Fonts ---------------------------------------------
   IBM Plex Sans (variable, wdth + wght axes) and IBM Plex Mono
   (static instances) ship as local TTF in /fonts.
   IBM Plex Serif is not bundled — editorial-only, loaded from
   Google Fonts when needed (or fallback to Plex Sans Regular).
   Path is computed relative to this stylesheet, so consumers
   that import colors_and_type.css from any depth get the fonts.
------------------------------------------------------------- */

/* Plex Sans — variable */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('fonts/IBMPlexSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
}

/* Plex Mono — static cuts. Light/Regular/Medium/SemiBold/Bold + italics */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/IBMPlexMono-Thin.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/IBMPlexMono-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/IBMPlexMono-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/IBMPlexMono-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/IBMPlexMono-Light.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/IBMPlexMono-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/IBMPlexMono-Italic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/IBMPlexMono-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/IBMPlexMono-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/IBMPlexMono-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/IBMPlexMono-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/IBMPlexMono-Bold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/IBMPlexMono-BoldItalic.ttf') format('truetype'); }

/* Plex Serif — editorial-only. Static cuts. */
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/IBMPlexSerif-Thin.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/IBMPlexSerif-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/IBMPlexSerif-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/IBMPlexSerif-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/IBMPlexSerif-Light.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/IBMPlexSerif-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/IBMPlexSerif-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/IBMPlexSerif-Italic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/IBMPlexSerif-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/IBMPlexSerif-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/IBMPlexSerif-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/IBMPlexSerif-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/IBMPlexSerif-Bold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/IBMPlexSerif-BoldItalic.ttf') format('truetype'); }

:root {
  /* ---------------- Color · Dark (default) ---------------- */
  --bg-base:        #0B0B0D;   /* page bg, near-black, never #000 */
  --bg-surface:     #141418;   /* cards, elevated */
  --bg-surface-2:   #1C1C22;   /* hover, secondary elevation */
  --border-subtle:  #252530;   /* hairlines, table dividers */
  --border-strong:  #2F2F3A;   /* emphasized hairline */

  --text-primary:   #F5F1EA;   /* warm off-white */
  --text-secondary: #A8A5A0;
  --text-tertiary:  #6E6B66;

  --accent-amber:     #C2410C; /* the only chromatic color */
  --accent-amber-dim: #7A2906; /* pressed, subtle accents */

  /* status-page indicator dots */
  --dot-live:    var(--accent-amber);
  --dot-standby: var(--text-tertiary);
  --dot-idle:    var(--border-strong);

  /* ---------------- Type · Families ---------------- */
  --font-sans:  'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: 'IBM Plex Serif', ui-serif, Georgia, 'Times New Roman', serif;

  /* ---------------- Type · Scale ---------------- */
  --fs-display:    72px;   /* 56–88px */
  --fs-h1:         40px;
  --fs-h2:         28px;
  --fs-h3:         20px;
  --fs-body:       17px;
  --fs-caption:    14px;
  --fs-micro:      12px;
  --fs-bignum:     96px;   /* 64–120px */

  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.5;
  --lh-loose:      1.7;

  --tr-display:   -0.02em;
  --tr-tight:     -0.01em;
  --tr-normal:     0;
  --tr-mono-caps:  0.08em;

  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;

  /* ---------------- Spacing ---------------- */
  /* Generous by default. Crowded layouts are off-brand. */
  --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;
  --space-10: 128px;

  /* ---------------- Radii ---------------- */
  /* Restrained. No pill bubbles. Most surfaces are 2–4px. */
  --radius-0: 0;
  --radius-1: 2px;     /* hairline boxes */
  --radius-2: 4px;     /* default cards, buttons */
  --radius-3: 6px;     /* slightly softened */
  --radius-pill: 999px;/* indicator dots only */

  /* ---------------- Shadow / Elevation ---------------- */
  /* Restraint. No soft drop-shadows on cards. Elevation is
     conveyed via surface color, not blur. */
  --shadow-none: none;
  --shadow-hairline: 0 0 0 1px var(--border-subtle);
  --shadow-hairline-strong: 0 0 0 1px var(--border-strong);
  --shadow-focus: 0 0 0 2px var(--accent-amber);

  /* ---------------- Motion ---------------- */
  /* Considered. Linear-coded. No bounces, no overshoot. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1);
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   320ms;

  /* ---------------- Layout ---------------- */
  --container-max:   1200px;
  --container-prose: 680px;
  --gutter:          var(--space-7);
}

/* ============================================================
   Light editorial mode — long-form essays, one-sheets only.
   ============================================================ */
[data-mode="light"] {
  --bg-base:        #F8F4ED;
  --bg-surface:     #FFFFFF;
  --bg-surface-2:   #F2EDE3;
  --border-subtle:  #E5DED1;
  --border-strong:  #D4CBB9;
  --text-primary:   #0B0B0D;
  --text-secondary: #4A4742;
  --text-tertiary:  #8A857D;
  --accent-amber:   #C2410C;
}

/* ============================================================
   Element defaults
   ============================================================ */
html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
p { margin: 0 0 var(--space-4); }

/* Display — hero typography */
.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}

/* Big-number stat — brand signature */
.bignum {
  font-family: var(--font-mono);
  font-weight: var(--fw-light);
  font-size: var(--fs-bignum);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.bignum-context {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  max-width: 28ch;
}

/* Mono caps — section meta, post headers, system labels */
.mono-caps {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-mono-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Inline mono */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Caption */
.caption {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

/* Section number prefix — 01 · ,  02 · */
.section-num {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  color: var(--text-tertiary);
  letter-spacing: var(--tr-mono-caps);
  text-transform: uppercase;
}
.section-num .dot { color: var(--accent-amber); margin: 0 0.4em; }

/* The slash — load-bearing punctuation */
.slash {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
}

/* Amber accent text — use sparingly (2–4 times per surface) */
.amber { color: var(--accent-amber); }

/* Hairline — divider rule */
.hairline { border: 0; border-top: 1px solid var(--border-subtle); margin: 0; }

/* Status-page indicator dot */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--dot-idle);
  vertical-align: 1px;
  margin-right: 6px;
}
.dot--live    { background: var(--dot-live); }
.dot--standby { background: var(--dot-standby); }
.dot--idle    { background: var(--dot-idle); }

/* Selection */
::selection { background: var(--accent-amber-dim); color: var(--text-primary); }