/* ============================================================
   ALCHEMI · DESIGN TOKENS (CSS custom properties)
   Source: Alchemi Design System. Plain CSS, no framework.
   Load order: tokens.css → site.css
   ============================================================ */

/* ---- Self-hosted fonts (variable). No third-party requests. ----
   Files: assets/inter-var.woff2, assets/jetbrains-mono-var.woff2
   (copied from design/assets/). Weight ranges cover 400 / 500 / 600. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../assets/jetbrains-mono-var.woff2") format("woff2");
}

:root {
  /* ---- Base palette ---- */
  --color-stark-white: #FFFFFF;   /* primary background */
  --color-alabaster:   #F4F5F7;   /* secondary surface */
  --color-obsidian:    #111111;   /* text + structure */
  --color-aero-blue:   #5CCBFF;   /* calls to action ONLY */

  /* ---- Neutral ramp (text hierarchy, borders, all data-viz) ---- */
  --ink-900: #111111;
  --ink-800: #1C1E21;
  --ink-700: #2C2F34;
  --ink-600: #44484F;
  --ink-500: #5E636B;
  --ink-400: #868C95;
  --ink-300: #AEB3BB;
  --ink-200: #D4D7DC;
  --ink-150: #E2E4E8;
  --ink-100: #F4F5F7;
  --ink-050: #FAFAFB;

  /* ---- Accent states (CTA only) ---- */
  --aero-blue:       #5CCBFF;
  --aero-blue-hover: #3DBDF7;     /* hover darkens, never lightens */
  --aero-blue-press: #1FA9E8;
  --aero-on:         #06202B;     /* text on Aero Blue */

  /* ---- Semantic aliases ---- */
  --bg-base:        var(--color-stark-white);
  --bg-subtle:      var(--color-alabaster);
  --bg-inverse:     var(--color-obsidian);
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary:  var(--ink-500);   /* lowest text tone allowed on white/alabaster */
  --text-inverse:   var(--color-stark-white);
  --text-inverse-secondary: var(--ink-300);
  --text-on-accent: var(--aero-on);
  --border-subtle:  var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-900);
  --border-inverse: var(--ink-700);
  --accent:         var(--aero-blue);
  --accent-hover:   var(--aero-blue-hover);
  --accent-press:   var(--aero-blue-press);

  /* ---- Data-viz (monochrome only; never Aero Blue) ---- */
  --dataviz-1: #111111;
  --dataviz-2: #3A3F45;
  --dataviz-3: #5E636B;
  --dataviz-4: #868C95;
  --dataviz-5: #AEB3BB;
  --dataviz-6: #D4D7DC;

  /* ---- Type families & weights ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---- Type scale (px) — responsive steps are overridden below ---- */
  --text-hero:    64px;   /* H1 on Home */
  --text-h1:      48px;   /* H1 on inner pages */
  --text-section: 40px;   /* H2 section titles */
  --text-h3:      28px;   /* card / clause headings */
  --text-h4:      24px;   /* doc headings, statements */
  --text-lead:    20px;   /* hero sub-line, step text */
  --text-body:    16px;
  --text-sm:      14px;
  --text-xs:      12px;
  --text-label:   13px;   /* mono uppercase labels */

  --leading-tight:  1.05;
  --leading-snug:   1.25;
  --leading-normal: 1.55;
  --leading-mono:   1.45;

  --tracking-display: -0.025em;
  --tracking-tight:   -0.01em;
  --tracking-label:   0.08em;
  --tracking-wide:    0.14em;

  /* ---- 8px spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* ---- Radius, strokes, elevation ---- */
  --radius-none: 0;
  --radius-sm: 1px;
  --radius-md: 2px;   /* maximum in the system */
  --stroke-hairline: 1px;
  --stroke-base: 1.5px;
  --stroke-structural: 2px;
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.06), 0 0 0 1px var(--ink-150);

  /* ---- Layout ---- */
  --container-max: 1120px;
  --page-gutter: 32px;
  --grid-gutter: 24px;
  --header-height: 72px;
  --section-space: 128px;      /* vertical padding of a page section */
  --section-head-gap: 64px;    /* section head → content */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}

/* Tablet */
@media (max-width: 960px) {
  :root {
    --text-hero: 52px;
    --text-section: 36px;
    --section-space: 96px;
    --section-head-gap: 48px;
  }
}

/* Mobile */
@media (max-width: 720px) {
  :root {
    --text-hero: 40px;
    --text-h1: 36px;
    --text-section: 30px;
    --text-h3: 24px;
    --text-h4: 20px;
    --text-lead: 18px;
    --page-gutter: 24px;
    --header-height: 64px;
    --section-space: 80px;
    --section-head-gap: 40px;
  }
}