/* =====================================================================
   Forecite Design Tokens
   Forest-dominant. Bone-foreground. Grain throughout. Brackets contain.
   Import this file first. Everything else builds on these.
   ===================================================================== */

/* ---------- Fonts (local) ---------- */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* CDN fallbacks for environments without local fonts.
   These are intentional substitutes — Söhne is the brand's intent;
   Inter Tight is the closest licensable match. Flag this to the user
   if they want the production fonts. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter+Tight:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Color: brand ---------- */
  --forest-900: #0A1F16;       /* deepest, near-black green — modal scrim, page underlay */
  --forest-800: #0E2A1F;       /* default page background */
  --forest-700: #143524;       /* raised section */
  --forest-600: #1B4332;       /* primary brand green */
  --forest-500: #2D5A43;       /* hover/active surface on forest */
  --forest-400: #3F6E55;       /* muted forest, dividers on forest-bone overlap */

  --bone-100:   #FBF8F1;       /* highest-contrast bone */
  --bone-200:   #F4EFE6;       /* default bone surface / type on forest */
  --bone-300:   #EAE3D2;       /* warmer bone, secondary surface */
  --bone-400:   #D8CFB8;       /* edges, hairline borders on bone */

  --ink-900:    #0B1A14;       /* near-black, type on bone — not pure black */
  --ink-700:    #1F2D26;       /* secondary type on bone */

  --mute-500:   #6B7A6F;       /* secondary type, dividers, footnote body */
  --mute-400:   #8A968D;       /* tertiary, captions */

  --gold-500:   #C9A961;       /* citation gold — earned accent */
  --gold-600:   #B08F46;       /* gold press state */

  --alert-500:  #A8412A;       /* terracotta — inline corrections in audit content only */

  /* ---------- Color: semantic ---------- */
  --bg:           var(--forest-800);
  --bg-raised:    var(--forest-700);
  --bg-deep:      var(--forest-900);
  --surface-bone: var(--bone-200);

  --fg-1:         var(--bone-200);   /* primary type on forest */
  --fg-2:         var(--mute-400);   /* secondary type on forest */
  --fg-3:         rgba(244, 239, 230, 0.55);
  --fg-on-bone-1: var(--ink-900);
  --fg-on-bone-2: var(--mute-500);

  --accent:       var(--gold-500);
  --accent-press: var(--gold-600);

  --border-bone-on-forest: rgba(244, 239, 230, 0.18);
  --border-bone-on-forest-hover: rgba(244, 239, 230, 0.55);
  --border-forest-on-bone: rgba(11, 26, 20, 0.18);
  --border-forest-on-bone-hover: rgba(11, 26, 20, 0.55);

  --scrim:        rgba(14, 42, 31, 0.75);
  --grain-opacity: 0.08;

  /* ---------- Type: families ---------- */
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans:    "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type: scale ---------- */
  /* Editorial scale — large display, comfortable body, sharp eyebrow */
  --fs-eyebrow:   12px;   /* mono caps, +0.12em letter-spacing */
  --fs-caption:   13px;
  --fs-body-sm:   14px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-h6:        20px;
  --fs-h5:        24px;
  --fs-h4:        32px;
  --fs-h3:        44px;
  --fs-h2:        60px;
  --fs-h1:        88px;
  --fs-display:   120px;  /* hero only, used once per page */

  --lh-display:   1.05;
  --lh-heading:   1.15;
  --lh-body:      1.6;
  --lh-tight:     1.3;

  --tr-display:   -0.02em; /* tracking, display */
  --tr-heading:   -0.01em;
  --tr-body:      0em;
  --tr-eyebrow:   0.12em;

  /* ---------- Spacing (8px grid) ---------- */
  --space-0:  0;
  --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: 144px;

  --gutter-sm: 24px;
  --gutter-md: 48px;
  --gutter-lg: 96px;
  --gutter-xl: 144px;

  --measure: 64ch;   /* default body measure */

  /* ---------- Radii ---------- */
  --radius-0:   0;       /* default — sharp */
  --radius-1:   2px;     /* buttons, inputs */
  --radius-pill: 999px;  /* avatars, the rare pill */

  /* ---------- Shadows (sparingly used) ---------- */
  --shadow-none:    none;
  --shadow-float:   0 8px 32px rgba(11, 26, 20, 0.4);  /* floating CTA only */
  --shadow-modal:   0 24px 80px rgba(11, 26, 20, 0.6);

  /* ---------- Motion ---------- */
  --ease-editorial: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.5, 0, 0.5, 1);
  --dur-fast:       160ms;
  --dur-ui:         320ms;
  --dur-section:    600ms;
  --dur-scatter:    1200ms;

  /* ---------- Layout ---------- */
  --maxw-prose:    72ch;
  --maxw-content:  1240px;
  --maxw-wide:     1440px;
  --topbar-h:      72px;
}

/* =====================================================================
   Semantic element styles
   These are intended to be applied to real elements; they encode the
   editorial register without forcing a class system.
   ===================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
}
h6, .h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h6);
  line-height: var(--lh-heading);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-2);
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0;
}

code, kbd, samp, pre, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-editorial);
}
a:hover {
  text-decoration-color: var(--accent);
}

hr {
  border: none;
  border-top: 1px solid var(--border-bone-on-forest);
  margin: var(--space-7) 0;
}

::selection {
  background: var(--gold-500);
  color: var(--ink-900);
}

/* The bracket primitive — applied to the wordmark and bracketed labels */
.bracketed::before { content: "["; }
.bracketed::after  { content: "]"; }
.bracketed {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
}
.bracketed:hover::before,
.bracketed:hover::after {
  color: var(--accent);
  transition: color var(--dur-ui) var(--ease-editorial);
}

/* Grain overlay — apply to a section to add the brand's atmosphere */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/grain.svg");
  background-size: 240px 240px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  z-index: 1;
}