/* GENERATED by `npm run sync:design` from design-system/. Do not edit here. */
/* ==========================================================
   FleetFixer design system, TOKENS
   Source of truth: design-system/ff-tokens.css
   Synced into every <platform>/shared/ by `npm run sync:design`.
   Do not edit the copies in platform dirs, edit this file.

   Identity: "Pine & Citrus". Deep pine green brand with a citrus
   highlight over warm bark neutrals. Display type Hanken Grotesk,
   body type Inter. Light is the default theme; [data-theme="dark"]
   overrides land a full dark theme. The legacy variable names the
   old teal/navy brand used (--accent, --bg, --panel, --stroke,
   --text, --muted, --brand-gradient, --hero-dark, etc.) are kept
   and re-pointed to the new palette, so any page that links this
   file re-skins to the new brand with no markup change.
   ========================================================== */

:root{
  color-scheme: light;

  /* ---- Pine ramp (brand primary) ---- */
  --pine-50:#EAF7F1; --pine-100:#C9ECE0; --pine-200:#97D8C2; --pine-300:#5DBE9D;
  --pine-400:#2E9B79; --pine-500:#1C7A5C; --pine-600:#15614A; --pine-700:#0F4D3A;
  --pine-800:#0A3A2B; --pine-900:#06281D;

  /* ---- Sea-green ramp (elegant, natural highlight, the lead light green) ---- */
  --sea-50:#EDF8F2; --sea-100:#D6F1E3; --sea-200:#A9E3C9; --sea-300:#6FD0A8;
  --sea-400:#3FB680; --sea-500:#2FA06E; --sea-600:#247E58; --sea-700:#1C6446;

  /* ---- Citrus ramp (kept for a rare accent; no longer the lead) ---- */
  --citrus-50:#FBFEE8; --citrus-100:#F4F9D8; --citrus-200:#EAF4B4; --citrus-300:#DCEC86;
  --citrus-400:#C7E04A; --citrus-500:#B4D02E; --citrus-600:#9CB81F; --citrus-700:#7C9417;
  --citrus-800:#5E7014; --citrus-900:#4A5814;

  /* ---- Bark neutrals (warm green-tinted) ---- */
  --bark-50:#F4F3EE; --bark-100:#ECEBE4; --bark-200:#DEDDD3; --bark-300:#C4C5B8;
  --bark-400:#9AA095; --bark-500:#737A6F; --bark-600:#555C52; --bark-700:#3A423A;
  --bark-800:#26382F; --bark-900:#14201B; --bark-950:#0E1714;

  /* ---- Brand accents (legacy names re-pointed). Elegant emerald that
         stays accessible on white, with fresh sea-green for light accents. ---- */
  --accent:var(--pine-600);
  --accent-strong:var(--pine-700);
  --accent-2:var(--pine-500);
  --accent-light:var(--sea-400);
  --accent-glow:var(--sea-300);
  --accent-soft:var(--sea-50);
  --accent-contrast:#FFFFFF;            /* text on accent fills */
  --accent-red:var(--pine-600);         /* legacy alias kept */
  --accent-red-dark:var(--pine-700);

  /* Highlight: a fresh, elegant sea-green (natural, not lime) */
  --highlight:var(--sea-400);
  --highlight-strong:var(--sea-500);
  --highlight-ink:#06281D;              /* text on highlight fills */

  /* ---- Surfaces, LIGHT (clean minimal canvas with a whisper of sage green) ---- */
  --bg:#F1F5EF;
  --panel:#FFFFFF;
  --panel-2:#FAFCF8;
  --surface-2:#E8F0E6;
  --stroke:#E1E9DD;
  --stroke-strong:#CDD8C6;
  --text:#14201B;
  --text-strong:#0A1410;
  --muted:#5A6B61;
  --muted-2:#7C8A80;
  --hero-dark:#0A1410;

  /* ---- Brand gradients (pine depth into a fresh sea-green) ---- */
  --brand-gradient:linear-gradient(135deg,var(--pine-700) 0%,var(--pine-500) 55%,var(--sea-400) 100%);
  --brand-gradient-soft:linear-gradient(135deg,var(--pine-500) 0%,var(--sea-300) 110%);
  --brand-gradient-citrus:linear-gradient(135deg,var(--pine-600) 0%,var(--sea-300) 130%);

  /* Page backdrop wash, faint sea-green for a calm natural canvas */
  --backdrop:
    radial-gradient(1100px 520px at 82% -8%, rgba(111,208,168,.12), transparent 62%),
    radial-gradient(900px 480px at -5% 102%, rgba(21,97,74,.06), transparent 62%);

  /* ---- Glass, LIGHT (subtle, Apple-style translucency) ---- */
  --glass-bg:rgba(255,255,255,.72);
  --glass-border:rgba(20,32,27,.07);
  --glass-hi:rgba(255,255,255,.80);     /* top inner highlight */
  --glass-blur:16px;
  --glass-sat:150%;
  --glass-shadow:0 8px 28px rgba(20,32,27,.08);

  /* ---- Semantic ---- */
  --success:#1FA971; --success-soft:rgba(31,169,113,.14);
  --warning:#E8A33D; --warning-soft:rgba(232,163,61,.16);
  --danger:#E5544B;  --danger-soft:rgba(229,84,75,.14);
  --info:#3FA6B8;    --info-soft:rgba(63,166,184,.14);

  /* ---- Radii ---- */
  --radius-sm:8px; --radius:14px; --radius-lg:18px; --radius-xl:24px; --radius-pill:999px;

  /* ---- Elevation (soft, low, minimal) ---- */
  --shadow-xs:0 1px 2px rgba(20,32,27,.04);
  --shadow-sm:0 1px 6px rgba(20,32,27,.06);
  --shadow:0 6px 22px rgba(20,32,27,.07);
  --shadow-lg:0 24px 60px rgba(20,32,27,.10);

  /* Focus ring (pine-tinted) */
  --focus-ring:0 0 0 3px rgba(46,155,121,.34);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur-1:.12s; --dur-2:.18s; --dur-3:.28s;

  /* ---- Spacing (4/8 rhythm) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  /* ---- Typography ---- */
  --font-display:'Hanken Grotesk','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,Menlo,Monaco,'Cascadia Code',monospace;
}

/* ==========================================================
   DARK THEME
   ========================================================== */
[data-theme="dark"]{
  color-scheme: dark;

  --accent:var(--sea-400);
  --accent-strong:var(--sea-300);
  --accent-2:var(--sea-300);
  --accent-light:var(--sea-200);
  --accent-glow:var(--sea-300);
  --accent-soft:rgba(63,182,128,.18);
  --accent-contrast:#06281D;
  --accent-red:var(--sea-400);
  --accent-red-dark:var(--sea-300);

  --highlight:var(--sea-300);
  --highlight-strong:var(--sea-200);
  --highlight-ink:#06281D;

  --bg:var(--bark-950);
  --panel:var(--bark-900);
  --panel-2:#19271F;
  --surface-2:var(--bark-800);
  --stroke:rgba(255,255,255,.09);
  --stroke-strong:rgba(255,255,255,.16);
  --text:#EAF3EC;
  --text-strong:#FFFFFF;
  --muted:#9DB0A6;
  --muted-2:#7E9387;
  --hero-dark:#070F0C;

  --brand-gradient:linear-gradient(135deg,var(--pine-700) 0%,var(--pine-500) 60%,var(--sea-400) 100%);
  --brand-gradient-soft:linear-gradient(135deg,var(--sea-400) 0%,var(--sea-200) 100%);
  --brand-gradient-citrus:linear-gradient(135deg,var(--sea-500) 0%,var(--sea-300) 120%);

  --backdrop:
    radial-gradient(1100px 520px at 82% -8%, rgba(63,182,128,.18), transparent 60%),
    radial-gradient(900px 480px at -5% 102%, rgba(111,208,168,.07), transparent 60%);

  --glass-bg:rgba(20,32,27,.55);
  --glass-border:rgba(255,255,255,.10);
  --glass-hi:rgba(255,255,255,.08);
  --glass-shadow:0 16px 44px rgba(0,0,0,.50);

  --success-soft:rgba(31,169,113,.20);
  --warning-soft:rgba(232,163,61,.22);
  --danger-soft:rgba(229,84,75,.22);
  --info-soft:rgba(63,166,184,.20);

  --shadow-xs:0 1px 2px rgba(0,0,0,.40);
  --shadow-sm:0 2px 10px rgba(0,0,0,.42);
  --shadow:0 10px 30px rgba(0,0,0,.46);
  --shadow-lg:0 24px 56px rgba(0,0,0,.56);

  --focus-ring:0 0 0 3px rgba(93,190,157,.40);
}

/* Smooth theme cross-fade on the surfaces that actually change.
   Scoped (not a universal * transition) so it stays cheap. */
html.ff-theme-ready body{
  transition: background-color var(--dur-3) var(--ease), color var(--dur-3) var(--ease);
}

/* Universal reduced-motion guard. Lives in the one file every page
   links, so the whole estate inherits it. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}