/* ------------------------------------------------------------------
   FMH Design System — colours, typography, motion tokens
   Future Made Human, v2 (Application Design Language)

   Surface-led warm palette; depth without shadow.
   IBM Plex Sans (system) + Space Grotesk (machine), Fraunces (editorial only).
   Terracotta is reserved for action and navigation state.
   ------------------------------------------------------------------ */

/* Fonts:
   - Fraunces:        local variable font (full opsz + wght range, includes SOFT + WONK axes)
   - IBM Plex Sans:   Google Fonts (no local file supplied — request for upload pending)
   - Space Grotesk:   Google Fonts (no local file supplied — request for upload pending) */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=Space+Grotesk:wght@400;500&display=swap');

:root {
  /* --------------------------------------------------
     Surface palette — three working tones (paper / machine / card)
     plus deep variants for headers, dividers and recesses.
     -------------------------------------------------- */
  --color-paper:         #EFEDE8;  /* page background — the desk */
  --color-machine:       #E4E2DD;  /* panel surface — the instrument body */
  --color-machine-deep:  #D6D3CC;  /* panel header strip, hover, divider fill */
  --color-card:          #FAF8F4;  /* content cards — the brightest layer */
  --color-white:         #FFFFFF;  /* card hover only */
  --color-recess-deep:   #A8A298;  /* inset slots / channels for tactile controls */
  --color-rule:          #C9C4BC;  /* hairlines, scale ticks, unfilled cells */

  /* Brand-doc surface tones (used in print/editorial work) */
  --color-surface-warm:  #F5F0EA;  /* "paper" in the brand doc */
  --color-surface-mid:   #EAE3D9;  /* table rows, card backgrounds */
  --color-surface-deep:  #D8CDCD;  /* table headers */

  /* --------------------------------------------------
     Ink / text — never pure black
     -------------------------------------------------- */
  --color-ink:           #2E2B28;  /* titles, structural anchors */
  --color-graphite:      #4A4A4A;  /* body text, UI text */
  --color-muted:         #7A6F6F;  /* labels, metadata, icons */
  --color-subtitle:      #988B8B;  /* tertiary labels, very small text */

  /* --------------------------------------------------
     Accents — disciplined. Terracotta = action/nav.
     Slate green = filled/complete data. Ink red = blocked.
     -------------------------------------------------- */
  --color-terracotta:        #E4965D;
  --color-terracotta-shade:  #C77F4C;  /* hover on terracotta */
  --color-terracotta-deep:   #A86638;  /* pressed/focus */
  --color-slate-green:       #7A8C7E;
  --color-ink-red:           #B84D3E;  /* blocked status only */

  /* --------------------------------------------------
     Typography
     -------------------------------------------------- */
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;  /* system voice */
  --font-mono:    'Space Grotesk', ui-monospace, monospace;               /* machine voice */
  --font-serif:   'Fraunces', Georgia, serif;                             /* editorial only */

  /* Weights — never above 500 in app UI */
  --weight-regular: 400;
  --weight-medium:  500;

  /* Letter-spacing */
  --tracking-title:    -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-body:     -0.005em;
  --tracking-meta:      0.08em;
  --tracking-meta-wide: 0.14em;

  /* --------------------------------------------------
     Motion — functional only. Decelerating, no bounce.
     -------------------------------------------------- */
  --ease:               cubic-bezier(0.2, 0, 0, 1);
  --duration-state:     200ms;   /* hover/focus colour change */
  --duration-layout:    320ms;   /* panel expand, drawer open */
  --duration-page:      240ms;   /* page crossfade */
  --duration-tactile:   240ms;   /* slider snap, card settle */

  /* --------------------------------------------------
     Layout
     -------------------------------------------------- */
  --container-max:    1280px;
  --outer-margin:     64px;
  --sidebar-width:    360px;
  --column-gutter:    80px;

  /* Spacing rhythm (8px base, with named steps) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radii — 2px maximum. Tactile knob is the only round element. */
  --radius-sharp:    0;
  --radius-2:        2px;
  --radius-tactile:  9999px;  /* slider handle only */
}

/* ------------------------------------------------------------------
   Base elements
   ------------------------------------------------------------------ */

html, body {
  background: var(--color-paper);
  color: var(--color-graphite);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
}

/* Semantic type roles — application working scale */

.fmh-page-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: var(--tracking-title);
  color: var(--color-ink);
}

.fmh-detail-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: var(--tracking-title);
  color: var(--color-ink);
}

.fmh-section {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.fmh-column-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 16px;
  color: var(--color-ink);
}

.fmh-card-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 1.35;
  color: var(--color-ink);
}

.fmh-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-graphite);
  max-width: 64ch;
}

.fmh-ui {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: 14px;
  color: var(--color-graphite);
}

.fmh-ui-value {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 13px;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.fmh-hero-numeric {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 44px;
  letter-spacing: var(--tracking-title);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* Metadata — uppercase, letter-spaced, small. The machine voice. */
.fmh-meta {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta-wide);
  color: var(--color-muted);
}

.fmh-meta-sm {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta-wide);
  color: var(--color-muted);
}

/* Editorial title — only in printed deliverables, never in app UI. */
.fmh-editorial-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}