/* ============================================================
   ForgeFX Simulations — Foundations
   Colors, typography, spacing, radii, shadows, motion.
   Industrial / forge metaphor: hot metal palette over cool steel.
   ============================================================ */

/* ---- Brand webfonts ----------------------------------------------------
   Open Sans (superfamily) is now self-hosted and carries the brand:
   the Condensed cut drives display/signage, the normal width drives UI/body.
   Lato + Carlito are self-hosted and available as secondary families.
   JetBrains Mono is now self-hosted too (see @font-face block below).
   ----------------------------------------------------------------------- */

/* Open Sans — body / UI (variable: wght 300–800) */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
}

/* Open Sans Condensed — display / signage (static cuts) */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/OpenSans_Condensed-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/OpenSans_Condensed-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/OpenSans_Condensed-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/OpenSans_Condensed-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: italic; font-weight: 800; font-display: swap;
  src: url('fonts/OpenSans_Condensed-ExtraBoldItalic.ttf') format('truetype');
}

/* Lato — secondary family */
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Lato-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/Lato-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Lato-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/Lato-Black.ttf') format('truetype');
}

/* Carlito — secondary family (Calibri-metric) */
@font-face {
  font-family: 'Carlito'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Carlito-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Carlito'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/Carlito-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Carlito'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Carlito-Bold.ttf') format('truetype');
}

/* Impact — display / signage (brand display face, 2026-09-04). Impact ships with
   macOS and Windows and is not redistributable, so it is NOT self-hosted; Anton
   (OFL, fonts/Anton-Regular.ttf) is the self-hosted fallback for Linux/Android.
   Impact has one weight: author display text at font-weight 400 and let
   font-synthesis stay off; do not ask for 700. */
@font-face {
  font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Anton-Regular.ttf') format('truetype');
}

/* Oswald — LEGACY display face (superseded by Impact 2026-09-04; kept so older
   pages still render) */
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('fonts/Oswald-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Oswald-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Oswald-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Oswald-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Oswald-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Oswald-Bold.ttf') format('truetype');
}

/* JetBrains Mono — telemetry / readouts / code (brand mono, self-hosted) */
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/JetBrainsMono-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/JetBrainsMono-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/JetBrainsMono-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('fonts/JetBrainsMono-BoldItalic.ttf') format('truetype');
}

:root {
  /* =====================================================
     CORE PALETTE — semantic role tokens (authoritative)
     One orange accent · copper support · warm-white text
     on a warm forge-black ground. Never pure black/white.
     These point at the literal color tokens below — change
     a role here, not a hex.
     ===================================================== */
  --forge-black: #261B13;        /* page ground — warm dark brown, NEVER #000 */
  --warm-white:  #F2EBE0;        /* text on dark — NEVER #FFFFFF */
  --primary:     var(--c-gold);  /* role → Gold. the ONLY accent, NEVER a fill bg */
  --copper:      var(--c-copper);/* role → Copper. support — eyebrows, dividers, " / " */

  /* =====================================================
     NAMED COLOR TOKENS — literal palette (source of truth)
     One token per named swatch on the brand card. Every
     role alias and scale anchor above/below points here.
     Change a hex in this block and it propagates project-
     wide. Reference surfaces are inherently warm-dark.
     ===================================================== */
  --c-slate:     #334342;   /* Slate     — cool dark neutral, ink on light */
  --c-stone:     #828B88;   /* Stone     — cool steel-gray neutral */
  --c-linen:     #FBE8D7;   /* Linen     — warm cream, light-mode surface */
  --c-gold:      #F79321;   /* Gold      — primary accent (canonical) */
  --c-copper:    #AA6027;   /* Copper    — support accent */
  --c-ember:     #A03E19;   /* Ember     — semantic destructive/alert */
  --c-hot-black: #251B13;   /* Hot Black — warm near-black brand dark */

  --brand-primary:   var(--c-gold);      /* emphasis only */
  --brand-secondary: var(--c-copper);    /* support */
  --bg-page:         var(--forge-black);  /* #261B13 */
  --bg-card:         #2E2118;
  --bg-muted:        #392A1E;
  --border-default:  rgba(242,235,224,0.10);
  --text-primary:    var(--warm-white);
  --text-secondary:  #C9BBAA;
  --forge-bg-light:  var(--c-linen);      /* light-mode page surface */

  --font-body:     var(--font-sans);
  --font-heading:  var(--font-display);
  --font-wordmark: var(--font-display);
  --fs-body:    var(--fs-16);
  --fs-small:   var(--fs-13);
  --fs-caption: var(--fs-14);
  --ls-eyebrow:  0.14em;
  --ls-wordmark: 0.08em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --accent-bar-thin: 3px;

  /* =====================================================
     COLORS — Heat scale (primary, from logo)
     ===================================================== */
  --forge-50:  #FFF4E5;
  --forge-100: #FFE3BF;
  --forge-200: #FFCB85;
  --forge-300: #FBB052;
  --forge-400: #F49826;   /* logo orange — primary mid */
  --forge-500: var(--c-gold);   /* PRIMARY — anvil orange (canonical --c-gold) */
  --forge-600: #D9711A;
  --forge-700: #B3560F;   /* ember */
  --forge-800: #8B3F08;
  --forge-900: #5D2A04;

  --copper-50:  #F5EAE0;
  --copper-100: #E8D0B6;
  --copper-200: #D4A982;
  --copper-300: #BA855A;
  --copper-400: #A06C3F;
  --copper-500: var(--c-copper);   /* logo brown — secondary (canonical --c-copper) */
  --copper-600: #6F4520;
  --copper-700: #533218;
  --copper-800: #38210F;
  --copper-900: #1F1208;

  --spark:      #FFC861;   /* white-hot highlight */
  --spark-soft: #FFE0A0;

  /* =====================================================
     COLORS — Steel scale (neutrals)
     Slightly cool, industrial gunmetal.
     ===================================================== */
  --steel-50:  #F6F7F8;
  --steel-100: #ECEEF1;
  --steel-200: #D6DBE1;
  --steel-300: #B5BCC6;
  --steel-400: #8A93A1;
  --steel-500: #5B6675;
  --steel-600: #3C4654;
  --steel-700: #2A323D;
  --steel-800: #1C232D;
  --steel-900: #131820;
  --steel-950: #0B0E13;   /* near-black, "anvil" */
  --steel-1000: #05070A;

  /* =====================================================
     COLORS — Semantic / status
     ===================================================== */
  --hot:      #D63D1A;   /* error, danger, "stop" */
  --hot-soft: #FBE1DA;
  --caution:  #F4B61E;   /* warning */
  --caution-soft: #FFF0CC;
  --safe:     #2E9F5A;   /* success / safety green */
  --safe-soft: #DCEFE3;
  --plasma:   #2C7BF2;   /* info / VR-digital accent */
  --plasma-soft: #DDE8FB;

  /* =====================================================
     COLORS — Semantic foreground / background tokens
     Default: LIGHT theme (marketing surfaces)
     ===================================================== */
  --bg:        #F3ECE0;
  --bg-alt:    #EAE0D1;
  --bg-sunken: #E2D7C5;
  --bg-inset:  #EDE4D6;

  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-hot:    var(--forge-50);

  --fg:        var(--steel-900);   /* primary text */
  --fg-muted:  var(--steel-600);   /* secondary text */
  --fg-subtle: var(--steel-500);   /* tertiary text */
  --fg-faint:  var(--steel-400);   /* placeholder, captions */
  --fg-on-hot: #FFFFFF;            /* text over forge/orange */
  --fg-inverse: #FFFFFF;

  --border:        var(--steel-200);
  --border-strong: var(--steel-300);
  --border-hot:    var(--forge-500);

  --link:        var(--forge-600);
  --link-hover:  var(--forge-700);

  --focus-ring: 0 0 0 3px rgba(247, 147, 33, 0.35);

  /* =====================================================
     TYPOGRAPHY
     ===================================================== */
/* CROSS-PLATFORM FONT RULE (Adam, 2026-09-04): every token font must exist on
     Windows, on macOS with Office, and on the web without embedding — so a deck,
     a PDF export and a web page all set in the same faces on any machine.
     Display  Impact       (system on both; Arial Narrow = Gen's native-PPT header)
     Body     Calibri      (Office on both; Carlito is the OFL metric clone,
                            self-hosted for web/Linux so layout never shifts)
     Mono     Courier New  (system on both; Consolas where Office provides it)
     Open Sans, JetBrains Mono, Lato and Oswald stay in fonts/ as LEGACY only. */
  --font-display: 'Impact', 'Arial Narrow', 'Anton', sans-serif;
  --font-sans:    'Calibri', 'Carlito', 'Arial', sans-serif;
  --font-mono:    'Courier New', 'Consolas', 'Cousine', monospace;

  /* Type scale — generous step, industrial confidence */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --tracking-tighter: -0.025em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.18em;  /* eyebrow labels */

  /* =====================================================
     SPACING — 4px base
     ===================================================== */
  --space-0:  0;
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* =====================================================
     RADII — Industrial: low-radius / tooled edges
     ===================================================== */
  --r-0:   0;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   6px;
  --r-4:   8px;     /* default card */
  --r-5:   12px;
  --r-6:   16px;
  --r-full: 999px;

  /* =====================================================
     SHADOWS / ELEVATION
     Crisp, slightly cool, never blurry/marketing-gradient.
     ===================================================== */
  --shadow-1: 0 1px 0 rgba(11,14,19,0.04), 0 1px 2px rgba(11,14,19,0.06);
  --shadow-2: 0 1px 0 rgba(11,14,19,0.04), 0 4px 10px rgba(11,14,19,0.08);
  --shadow-3: 0 2px 4px rgba(11,14,19,0.06), 0 12px 28px rgba(11,14,19,0.12);
  --shadow-4: 0 8px 16px rgba(11,14,19,0.08), 0 24px 48px rgba(11,14,19,0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 0 0 1px rgba(11,14,19,0.04);
  --shadow-glow-forge: 0 0 0 1px rgba(247,147,33,0.4), 0 8px 30px rgba(247,147,33,0.35);

  /* =====================================================
     MOTION
     ===================================================== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   360ms;

  /* =====================================================
     LAYOUT
     ===================================================== */
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --content-max:  1280px;
}

/* =====================================================
   DARK THEME — Simulator HUD / product UI surfaces
   Apply: <body data-theme="dark"> or .theme-dark wrapper
   ===================================================== */
[data-theme="dark"], .theme-dark {
  --bg:        var(--forge-black);   /* #261B13 warm ground */
  --bg-alt:    #1F160F;
  --bg-sunken: #190F09;
  --bg-inset:  #1B120B;

  --surface:        #2E2118;
  --surface-raised: #392A1E;
  --surface-hot:    rgba(247,147,33,0.10);

  --fg:        var(--warm-white);   /* #F2EBE0 — never #FFF */
  --fg-muted:  #C9BBAA;
  --fg-subtle: #A8967F;
  --fg-faint:  #7E6E5C;

  --border:        rgba(242,235,224,0.10);
  --border-strong: rgba(242,235,224,0.20);

  --link:        var(--forge-400);
  --link-hover:  var(--forge-300);

  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.6);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.6);
  --shadow-4: 0 16px 40px rgba(0,0,0,0.7);
}

/* =====================================================
   SEMANTIC ELEMENT STYLES
   Drop-in: just include this CSS and HTML inherits.
   ===================================================== */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
}

/* Display headings — Impact, structural and assertive */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400; /* Impact is single-weight */
  font-synthesis-weight: none;
  font-size: clamp(var(--fs-40), 5.5vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400; /* Impact is single-weight */
  font-synthesis-weight: none;
  font-size: clamp(var(--fs-32), 4vw, var(--fs-56));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400; /* Impact is single-weight */
  font-synthesis-weight: none;
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

/* Eyebrow label — small uppercase signage above headlines */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--forge-600);
}

/* Body copy */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  margin: 0;
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.small, small {
  font-size: var(--fs-13);
  color: var(--fg-subtle);
}

/* Mono — telemetry, coordinates, code, simulator readouts */
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
.readout {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--forge-500);
  font-variant-numeric: tabular-nums;
}

/* Links */
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

/* Focus */
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-2);
}

/* Selection */
::selection { background: var(--forge-300); color: var(--steel-950); }