/* ============================================================
   ShipIt design tokens
   The single source for the web palette, type, spacing, radius
   and motion. Every page loads this file first, before
   styles.css; no other stylesheet declares palette values, they
   only consume these variables.

   Source of truth: docs/shipit-design-language.md
   (palette locked 2026-09-20, type measured 2026-09-26).

   Tool colours (Supabase #3ECF8E, Firebase #FFC400, AWS #FF9900,
   AWS Squid Ink #232F3E, License Violet #5F4B8B) are deliberately
   absent. They reach the site only through per-product artwork in
   assets/brand/store-icons/, never through chrome.

   Breakpoints cannot be custom properties (media queries do not
   read them). The site uses 1180 / 1000 / 840 / 720 / 560 px.
   ============================================================ */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/InstrumentSans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/InstrumentSans-latin-italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/JetBrainsMono-latin.woff2") format("woff2");
}
:root {
  color-scheme: dark;

  /* Core palette: the two brand colours. No pure black or white. */
  --offblack: #12110F;
  --cream: #F6F1E7;

  /* Surfaces */
  --bg: var(--offblack);
  --bg-soft: #171510;
  --surface: #1A1814;
  --surface-raised: #201D18;
  --surface-soft: #262219;
  --code: #0C0B09;
  --line: rgba(246, 241, 231, .08);
  --line-strong: rgba(246, 241, 231, .14);

  /* Text */
  --text: var(--cream);
  --muted: #B8B2A5;
  --quiet: #8A8477;

  /* Brand ink: monochrome, flips with the theme */
  --brand: var(--cream);
  --brand-hover: #FFFDF6;
  --brand-press: #EFE9DC;
  --brand-ink: #0B0A08;
  --brand-soft: rgba(246, 241, 231, .11);
  --brand-line: rgba(246, 241, 231, .28);
  --info: #CFC9BC;
  --warning: #D9D2C4;
  --danger: #C9C3B6;

  /* Accent aliases read by the landing and product contexts */
  --accent: var(--brand);
  --accent-hover: var(--brand-hover);
  --accent-press: var(--brand-press);
  --accent-soft: var(--brand-soft);
  --accent-line: var(--brand-line);
  --accent-ink: var(--brand-ink);

  /* Chrome, glass and grid layers */
  --nav-bg: rgba(18, 17, 15, .84);
  --nav-glass: rgba(18, 17, 15, .72);
  --pill-bg: rgba(18, 17, 15, .82);
  --panel-bg: rgba(18, 17, 15, .98);
  --control-bg: rgba(26, 24, 20, .94);
  --atmosphere: rgba(246, 241, 231, .08);
  --grid-ink: rgba(246, 241, 231, .018);
  --grid-line: rgba(246, 241, 231, .05);
  --glass-soft: rgba(246, 241, 231, .04);
  --glass: rgba(246, 241, 231, .08);
  --glass-strong: rgba(246, 241, 231, .06);
  --overlay-faint: rgba(246, 241, 231, .02);
  --overlay-soft: rgba(246, 241, 231, .025);
  --overlay: rgba(246, 241, 231, .035);
  --overlay-strong: rgba(246, 241, 231, .015);
  --overlay-raised: rgba(246, 241, 231, .014);

  /* Reading ink for docs, code and syntax */
  --ink-2: #BCB6A9;
  --ink-3: #C4BEB1;
  --ink-code: #D8D2C5;
  --gradient-ink: #E8E1D3;
  --tok-key: #CFC9BC;
  --tok-string: #D6D0C2;
  --tok-type: #C4BEB1;
  --dot: #403C35;

  /* Brand marks: cream tile with the ink S, inverted in light.
     --store-mark sits on primary (brand-filled) buttons; --store-mark-text
     matches the text colour, for secondary buttons. */
  --mark-bg: var(--cream);
  --mark-svg: url("assets/brand/shipit-mark.svg");
  --store-mark: url("assets/brand/unity-mark-ink.svg");
  --store-mark-text: url("assets/brand/unity-mark-cream.svg");

  /* Type: Instrument Sans for body and display, JetBrains Mono for
     labels and code, Cubao Wide for the wordmark and nothing else */
  --font-sans: "Instrument Sans", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-wordmark: "Cubao Wide", var(--font-sans);

  --text-hero: clamp(48px, 5.7vw, 76px);
  --text-section: clamp(36px, 4.2vw, 56px);
  --text-lead: 17px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --text-floor: 11px;
  --leading-body: 1.65;
  --label-tracking: .1em;

  --wordmark-size: 22px;
  --wordmark-wdth: 177.27;
  --wordmark-tracking: .01em;

  /* Space and layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --shell-max: 1200px;
  --shell-gutter: 48px;
  --section-space: 96px;
  --section-space-sm: 64px;

  /* Radius */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: .16s;
  --duration: .22s;
}

/* Light theme: cream surfaces, off-black ink, brand ink inverts */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--cream);
  --bg-soft: #F1EBDE;
  --surface: #EFE9DC;
  --surface-raised: #F9F5EB;
  --surface-soft: #E8E2D5;
  --code: #EDE7DA;
  --line: rgba(18, 17, 15, .14);
  --line-strong: rgba(18, 17, 15, .26);
  --text: var(--offblack);
  --muted: #45403A;
  --quiet: #555047;
  --brand: var(--offblack);
  --brand-hover: #2A2721;
  --brand-press: #3E3A33;
  --brand-ink: var(--cream);
  --brand-soft: rgba(18, 17, 15, .07);
  --brand-line: rgba(18, 17, 15, .18);
  --info: #5C574D;
  --warning: #555047;
  --danger: #3E3A33;
  --nav-bg: rgba(246, 241, 231, .84);
  --nav-glass: rgba(246, 241, 231, .72);
  --pill-bg: rgba(246, 241, 231, .82);
  --panel-bg: rgba(246, 241, 231, .98);
  --control-bg: rgba(246, 241, 231, .94);
  --atmosphere: rgba(18, 17, 15, .05);
  --grid-ink: rgba(18, 17, 15, .035);
  --grid-line: rgba(18, 17, 15, .06);
  --glass-soft: rgba(18, 17, 15, .05);
  --glass: rgba(18, 17, 15, .08);
  --glass-strong: rgba(18, 17, 15, .06);
  --overlay-faint: rgba(18, 17, 15, .025);
  --overlay-soft: rgba(18, 17, 15, .03);
  --overlay: rgba(18, 17, 15, .05);
  --overlay-strong: rgba(18, 17, 15, .02);
  --overlay-raised: rgba(18, 17, 15, .02);
  --ink-2: #3E3A33;
  --ink-3: #2A2721;
  --ink-code: #262219;
  --gradient-ink: #262219;
  --tok-key: #3E3A33;
  --tok-string: #45403A;
  --tok-type: #403C35;
  --dot: #C9C3B6;
  --mark-bg: var(--offblack);
  --mark-svg: url("assets/brand/shipit-mark-cream.svg");
  --store-mark: url("assets/brand/unity-mark-cream.svg");
  --store-mark-text: url("assets/brand/unity-mark-ink.svg");
}