/* Outpost design tokens: the Freaky Turtle brand applied to a working tool.
   Components use only these names (docs/UI.md). */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("/static/vendor/fonts/bricolage-grotesque-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("/static/vendor/fonts/bricolage-grotesque-latin-800.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/albert-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/albert-sans-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-weight: 600; font-display: swap; src: url("/static/vendor/fonts/albert-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Spline Sans Mono"; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/spline-sans-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Spline Sans Mono"; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/spline-sans-mono-latin-500.woff2") format("woff2"); }

:root {
  /* Colour */
  --ink: #0A1F1D;
  --ink-deep: #031110;           /* a solid button on hover: ink, a shade darker */
  --ink-soft: #3D5450;
  --ink-faint: #5E726E;          /* placeholder text, disabled labels: 4.9:1 on paper */
  --paper: #FBFFFD;
  --paper-dim: #F0FBF5;
  --paper-deep: #E3F4EB;         /* wells, hover on paper-dim */
  --rule: color-mix(in srgb, var(--ink) 12%, transparent);
  --rule-strong: color-mix(in srgb, var(--ink) 28%, transparent);
  --mint: #B0FFAC;
  --cyan: #13FFF7;
  --teal: #0B8F88;               /* focus rings, rules, large accents: not small text */
  --teal-ink: #087069;           /* teal for small text on paper-dim: 5.4:1 */
  --grad-aqua: linear-gradient(100deg, var(--mint), var(--cyan));

  /* Status: always paired with a word and a shape */
  --ok: #087069;                 /* teal-ink: text-safe on paper and ok-tint */
  --ok-tint: #E6FBF3;
  --warn: #8A6300;               /* from Gold, darkened for text: 5.9:1 */
  --warn-tint: #FFF7D6;
  --warn-line: #F9D323;
  --bad: #B3262E;                /* from Coral, darkened for text: 6.3:1 */
  --bad-tint: #FFEDEE;
  --bad-line: #FF4E50;

  /* Type */
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Albert Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --h1: clamp(2rem, 4.5vw, 3rem);
  --h2: clamp(1.4rem, 2.6vw, 1.75rem);
  --h3: 1.15rem;
  --measure: 40rem;

  /* Space and shape */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-card: 1.2rem;
  --radius-field: 0.7rem;
  --radius-pill: 999px;
  --border: 1.5px;
  --focus: 3px solid var(--teal);
  --content: 76rem;
}