/* Exotics Direct design tokens (exoticsdirect-website#1 AC 1.1). VALUES only: a rebrand
   edits this file and never the structure in components.css. Its own palette (forest green
   and sand), separate from every other fleet brand. tests/unit/contrast.test.ts checks
   every text/background and control pair against WCAG 2.2 AA. */
:root {
  /* colour: grounds and text */
  --color-bg: #f8f6f0;
  --color-surface: #ffffff;
  --color-text: #1b2a21;
  --color-muted: #4a5850;
  --color-border: #ddd8cb;
  --color-control-border: #6d7a71;

  /* colour: brand */
  --color-accent: #1d6b45;
  --color-accent-hover: #155234;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #e3efe7;
  --color-sand: #efe4cc;
  --color-sand-text: #5e4517;
  --color-focus: #a34d00;
  --color-error: #b42318;
  --color-demo-bg: #fff4d6;
  --color-demo-text: #6b4800;

  /* colour: status chips (pending, processed, shipped, delivered, problem) */
  --chip-pending-bg: #eceee9;
  --chip-pending-text: #3b4540;
  --chip-processed-bg: #e1ecfb;
  --chip-processed-text: #1c4ab3;
  --chip-shipped-bg: #fbedd2;
  --chip-shipped-text: #7f4300;
  --chip-delivered-bg: #dcf2e3;
  --chip-delivered-text: #14602f;
  --chip-problem-bg: #fde3e1;
  --chip-problem-text: #a8201a;

  /* type: Figtree, self-hosted from brand/fonts (no font CDN) */
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.5rem;
  --line-height-base: 1.6;
  --line-height-tight: 1.2;
  --weight-regular: 400;
  --weight-bold: 700;

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  /* layout, radius, shadow, focus ring */
  --max-width: 68rem;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(27, 42, 33, 0.08), 0 6px 20px rgba(27, 42, 33, 0.08);
  --shadow-card-hover: 0 2px 4px rgba(27, 42, 33, 0.1), 0 12px 32px rgba(27, 42, 33, 0.12);
  --focus-ring: 0 0 0 3px var(--color-focus);
}