/* ForgeInt — flattened theme (styles.css + tokens) for standalone export */

/* ===== tokens/fonts.css ===== */
/* ForgeInt webfonts.
   SUBSTITUTION: brief specifies "Inter Display" + "Geist Mono"; no font binaries
   were provided. Nearest hosted matches: Google Fonts "Inter" variable (its opsz
   axis reaches the Display optical size at large settings) and Google Fonts
   "Geist Mono". Replace with licensed Inter Display files when available. */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Geist+Mono:wght@300..700&display=swap');


/* ===== tokens/colors.css ===== */
/* ForgeInt color system — monochrome dark editorial.
   One hue: none. Hierarchy is carried entirely by opacity of a warm off-white
   over near-black. No purple, no gradients on text, no colored accents. */
:root {
  /* Base scale */
  --black: #09090A;
  --white: #FFFFFF;
  --off-white: #F2F2F0;

  --bg-0: #09090A;   /* page */
  --bg-1: #0E0E10;   /* alternate band */
  --bg-2: #131316;   /* card / raised */
  --bg-3: #19191D;   /* hover / pressed surface */

  --fg-1: #F2F2F0;                      /* primary text */
  --fg-2: rgba(242, 242, 240, 0.64);    /* secondary text */
  --fg-3: rgba(242, 242, 240, 0.42);    /* muted / captions */
  --fg-4: rgba(242, 242, 240, 0.26);    /* faint / disabled */

  --line-1: rgba(242, 242, 240, 0.10);  /* hairline borders */
  --line-2: rgba(242, 242, 240, 0.06);  /* faintest dividers */
  --line-strong: rgba(242, 242, 240, 0.24); /* focused / active borders */

  /* Semantic aliases */
  --surface-page: var(--bg-0);
  --surface-band: var(--bg-1);
  --surface-card: var(--bg-2);
  --surface-raised: var(--bg-3);
  --surface-inverse: var(--off-white);  /* primary buttons, inverse blocks */

  --text-heading: var(--fg-1);
  --text-body: var(--fg-2);
  --text-muted: var(--fg-3);
  --text-faint: var(--fg-4);
  --text-inverse: var(--bg-0);

  --border-hairline: var(--line-1);
  --border-faint: var(--line-2);
  --border-strong: var(--line-strong);

  --accent: var(--off-white);           /* the "accent" is white */

  /* States — desaturated, used sparingly (form validation, system status) */
  --ok: #86A88B;
  --warn: #BFA36F;
  --danger: #C0736C;

  --scrim: rgba(9, 9, 10, 0.72);        /* dialog backdrop */
}


/* ===== tokens/typography.css ===== */
/* ForgeInt typography — typography-first system.
   Display: Inter (Display optical size), LIGHT weights at large sizes.
   Labels/eyebrows/data: Geist Mono, uppercase, wide tracking. */
:root {
  --font-display: 'Inter', 'Inter Display', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Display — light weight, tight leading, negative tracking */
  --type-display-xl: 200 clamp(56px, 7.5vw, 96px) / 1.02 var(--font-display);
  --type-display-lg: 200 clamp(44px, 5vw, 64px) / 1.06 var(--font-display);
  --type-display-md: 300 clamp(32px, 3.4vw, 44px) / 1.12 var(--font-display);
  --type-heading: 400 24px / 1.3 var(--font-sans);
  --type-heading-sm: 500 17px / 1.4 var(--font-sans);

  --tracking-display: -0.035em;
  --tracking-heading: -0.015em;

  /* Body */
  --type-body-lg: 300 19px / 1.6 var(--font-sans);
  --type-body: 400 15.5px / 1.65 var(--font-sans);
  --type-body-sm: 400 13.5px / 1.55 var(--font-sans);

  /* Mono labels — the signature secondary voice */
  --type-label: 400 12px / 1.4 var(--font-mono);
  --type-label-sm: 400 10.5px / 1.4 var(--font-mono);
  --type-data: 300 15px / 1.5 var(--font-mono);
  --tracking-label: 0.14em;   /* always paired with uppercase */
  --tracking-data: 0.01em;
}


/* ===== tokens/spacing.css ===== */
/* ForgeInt spacing & layout — generous, editorial. 4px base. */
:root {
  --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;
  --space-11: 176px;  /* section rhythm on marketing pages */

  --container-max: 1240px;
  --gutter: clamp(24px, 4vw, 56px); /* @kind spacing */
  --section-pad: clamp(96px, 12vh, 176px);
}


/* ===== tokens/effects.css ===== */
/* ForgeInt effects — radii, shadows, motion, blur. Restraint by default. */
:root {
  /* Radii — near-sharp. Editorial surfaces stay rectangular. */
  --radius-control: 2px;   /* buttons, inputs */
  --radius-card: 4px;      /* cards, dialogs */
  --radius-pill: 999px;    /* tags, badges only */

  /* Shadows — dark UI relies on borders, not shadows.
     Only floating layers (dialog, toast, tooltip, menus) cast one. */
  --shadow-float: 0 16px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-none: none;

  /* Motion — fades and small translates only. No bounces, no springs. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 520ms; /* @kind other */

  /* Blur — fixed header only */
  --blur-header: saturate(1.1) blur(14px); /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ForgeInt base element styles. */
* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  font-family: var(--font-sans);
}

h1, h2, h3, h4 { margin: 0; color: var(--text-heading); }

a {
  color: var(--fg-1);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--fg-2); }

::selection { background: var(--off-white); color: var(--bg-0); }

input::placeholder, textarea::placeholder { color: var(--fg-4); }

/* Utility voices */
.fi-label {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.fi-display {
  font: var(--type-display-lg);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
}


/* ===== styles.css (root, tokens inlined above) ===== */