/* ============================================================
   SYSTORM — Colors & Type
   ============================================================
   Design system tokens for the Systorm brand.
   - Dark industrial palette: deep graphite base, steel neutrals,
     molten-amber accent nodding to the scrap-metal furnace.
   - Type pairs a technical sans (IBM Plex Sans) with a
     wide-aperture display sans (Space Grotesk) and Plex Mono
     for numerics/code.
   ============================================================ */

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

:root {
  /* ---------- BRAND ---------- */
  --systorm-amber:        #F2994A;   /* molten / cut-torch accent */
  --systorm-amber-hot:    #FF7A1A;   /* hover / active */
  --systorm-amber-ember:  #C9651F;   /* pressed / low-contrast surfaces */
  --systorm-steel:        #7A8A99;   /* brushed steel neutral */

  /* ---------- NEUTRALS (dark-first) ---------- */
  --ink-0:   #0A0D10;   /* page background, deep graphite */
  --ink-1:   #10151A;   /* panel */
  --ink-2:   #161C23;   /* elevated surface */
  --ink-3:   #1E252E;   /* hover surface */
  --ink-4:   #2A333E;   /* card edge / divider strong */
  --ink-5:   #3A4552;   /* muted chrome */
  --ink-6:   #5A6775;   /* disabled text on dark */
  --ink-7:   #8A96A3;   /* secondary text */
  --ink-8:   #C7CDD4;   /* body on dark */
  --ink-9:   #E8EBEE;   /* high emphasis */
  --ink-10:  #F7F8F9;   /* pure foreground */

  /* ---------- LIGHT NEUTRALS (for light surfaces) ---------- */
  --paper-0: #FFFFFF;
  --paper-1: #F7F8F9;
  --paper-2: #EEF0F2;
  --paper-3: #E1E4E8;
  --paper-4: #C7CDD4;

  /* ---------- SEMANTIC FG / BG ---------- */
  --fg-1: var(--ink-10);
  --fg-2: var(--ink-8);
  --fg-3: var(--ink-7);
  --fg-4: var(--ink-6);
  --fg-accent: var(--systorm-amber);

  --bg-0: var(--ink-0);
  --bg-1: var(--ink-1);
  --bg-2: var(--ink-2);
  --bg-3: var(--ink-3);

  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);

  /* ---------- STATUS ---------- */
  --ok:     #3DCF8E;
  --warn:   #F2C14A;
  --danger: #E5484D;
  --info:   #5AA9FF;

  /* ---------- ELEVATION / RADII / SPACING ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 16px rgba(0,0,0,0.45);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 48px rgba(0,0,0,0.55);
  --shadow-glow-amber: 0 0 0 1px rgba(242,153,74,0.35), 0 10px 40px -10px rgba(242,153,74,0.5);

  --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;

  /* ---------- TYPE SYSTEM ---------- */
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --text-eyebrow-size: 12px;
  --text-eyebrow-weight: 500;
  --text-eyebrow-tracking: 0.18em;

  --h1-size: clamp(44px, 6.4vw, 96px);
  --h1-leading: 0.98;
  --h1-tracking: -0.03em;
  --h1-weight: 500;

  --h2-size: clamp(32px, 3.6vw, 56px);
  --h2-leading: 1.04;
  --h2-tracking: -0.02em;
  --h2-weight: 500;

  --h3-size: clamp(22px, 1.8vw, 28px);
  --h3-leading: 1.2;
  --h3-tracking: -0.01em;
  --h3-weight: 500;

  --body-size: 16px;
  --body-leading: 1.55;
  --small-size: 13px;
  --mono-size: 13px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.h1, h1.display {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  font-weight: var(--h1-weight);
  color: var(--fg-1);
  text-wrap: balance;
}

.h2, h2.display {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
  font-weight: var(--h2-weight);
  color: var(--fg-1);
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  line-height: var(--h3-leading);
  letter-spacing: var(--h3-tracking);
  font-weight: var(--h3-weight);
  color: var(--fg-1);
}

.body, p.body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--fg-2);
  text-wrap: pretty;
}

.small {
  font-family: var(--font-sans);
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--fg-3);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  letter-spacing: 0.01em;
  color: var(--fg-2);
}

.rule {
  height: 1px;
  background: var(--border-default);
  border: 0;
}