/* ==========================================================================
   Untravel — Design System Tokens  ·  colors_and_type.css
   --------------------------------------------------------------------------
   UT-2601 (Epic 26 — Website & Design System). The single source of truth for
   the Untravel marketing website's colour, type, motion, glass, shadow and
   radius tokens, exposed as CSS custom properties on :root.

   • STANDALONE. This file is the Epic 26 design foundation. Every later Epic 26
     web surface (UT-2602 nav, UT-2603 hero, …) imports ONLY this file for
     tokens — no inline hardcoded hex/type downstream.
   • ZERO shared code with the React Native app. Hex values were copied (not
     imported) from artifacts/mobile/constants/colors.ts and the UT-2601 brief,
     so the website never depends on app code.
   • This is the commented SOURCE. colors_and_type.min.css is the production
     (minified) build, generated by website/build.mjs — keep them in sync via
     that script, never edit the .min file by hand.

   Token-name source note: design-spec-source.md ("The Urban Expeditionary")
   is not present in the repo, so token names follow the UT-2601 brief's
   acceptance criteria verbatim. See the card's Open Questions.
   ========================================================================== */

/* --- Web fonts -----------------------------------------------------------
   Display: Space Grotesk · Body: Manrope · Mono: JetBrains Mono
   Imported here so any surface that links this file gets the brand fonts. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Lacquer&display=swap");

:root {
  /* === Surface stack =====================================================
     Warm off-white surfaces, lowest (pure white) → highest (dim). */
  --surface: #fcf9f4;
  --surface-dim: #dcdad5;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f6f3ee;
  --surface-container: #f0ede8;
  --surface-container-high: #ebe8e3;
  --surface-container-highest: #e5e2dd;
  --inverse-surface: #31302d;
  --inverse-on-surface: #f3f0eb;

  /* === Primary & accent ==================================================
     Untravel burnt-orange. --primary is the brand anchor; --primary-bright /
     --primary-soft-stop are the gradient stops used for CTAs and accents. */
  --primary: #a73a00;
  --primary-bright: #ff5c00;
  --primary-container: #fc5b00;
  --primary-soft-stop: #ff8547;
  --primary-container-soft: #ff8547; /* gradient stop; nav-arrow + dark-section eyebrow */
  --inverse-primary: #ffb59a;        /* muted orange on the inverse (dark) surface */
  --gradient-primary: linear-gradient(135deg, #ff5c00, #ff8547);

  /* === Text ============================================================== */
  --on-surface: #1c1c19;
  --on-surface-variant: #5b4039;
  --outline: #907067;
  --outline-variant: #e4beb4;

  /* === Typography ========================================================
     Font families. Use --font-display for headings, --font-body for prose,
     --font-mono for code / numeric / label detail. */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* The brush signature — Lacquer. One or two words per surface, 40px+ only. */
  --font-accent: "Lacquer", system-ui, cursive;

  /* === Animation =========================================================
     Durations and the brand ease. --ease-out is the standard "settle" curve. */
  --dur-fast: 140ms;
  --dur-default: 220ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* === Glass =============================================================
     Frosted-glass surface: translucent warm-white over a blur+saturate.
     --glass-bg is surface (#fcf9f4) at 72% alpha. */
  --glass-bg: rgba(252, 249, 244, 0.72);
  --glass-blur: blur(20px) saturate(140%);

  /* === Shadows ===========================================================
     Soft ambient elevation. --shadow-ambient-cta is the orange-tinted glow
     for primary CTAs. (No canonical spec value existed — authored for UT-2601;
     flagged for design confirmation on the card.) */
  --shadow-ambient-sm: 0 2px 8px 0 rgba(26, 28, 30, 0.04);
  --shadow-ambient: 0 4px 24px 0 rgba(26, 28, 30, 0.06);
  --shadow-ambient-lg: 0 4px 40px 0 rgba(26, 28, 30, 0.08);
  --shadow-ambient-cta: 0 6px 24px 0 rgba(167, 58, 0, 0.18);

  /* === Radii ============================================================= */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
}