/* ==========================================================================
   LOCARD Lab — design tokens
   Source of truth: brand-assets/LOCARD-brand-assets-v2 (README + logo artwork).
   Only the twelve brand colours below are used anywhere in the UI. Components
   live in app.css and must reference these variables, never raw hex.
   ========================================================================== */
:root {
  /* ---- Colour ---------------------------------------------------------- */
  --navy:        #16233D;   /* dark chrome: header, footer, meta bars */
  --navy-700:    #1E3050;   /* raised surfaces on navy */
  --amber:       #9C7A3C;   /* accent on light backgrounds */
  --amber-light: #C49A52;   /* accent on navy */
  --graphite:    #4B5563;
  --ink:         #16233D;   /* body text */
  --muted:       #4B5563;   /* secondary text, labels */
  --line:        #E2E7EE;   /* borders, dividers */
  --page:        #F5F7FA;   /* page background */
  --surface:     #FFFFFF;   /* cards, panels, inputs */
  --success:     #2E7D5B;
  --danger:      #B23A3A;

  /* Text on dark chrome (derived from surface/line, no new hues) */
  --on-navy:        var(--surface);
  --on-navy-muted:  var(--line);

  /* ---- Typography ------------------------------------------------------ */
  --font-brand: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;                 /* headings, brand, 600/700 */
  --font-body:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;                /* body, 400/500/600 */
  --font-mono:  "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;      /* labels, motto, code, values */

  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.5rem;     /* 24px */
  --text-2xl: 2rem;       /* 32px */
  --leading-tight: 1.2;
  --leading-body:  1.55;
  --tracking-label: 0.08em;   /* mono uppercase labels */

  /* ---- Space (4px scale) ------------------------------------------------ */
  --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;
  --space-16: 64px;

  /* ---- Shape & depth ---------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(22, 35, 61, 0.06);
  --shadow-md: 0 4px 12px rgba(22, 35, 61, 0.10);
  --focus-ring: 0 0 0 3px var(--amber-light);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1120px;
  --gutter: var(--space-4);
  --header-height: 64px;

  /* ---- Brand rules (from kit README) ------------------------------------ */
  --logo-height: 40px;      /* header logo; never below 28px */
  --logo-min-height: 28px;
  /* Clear space = amber square height x 4. At 40px the square is ~8px. */
  --logo-clear: 32px;

  /* ---- Motion ----------------------------------------------------------- */
  --motion-fast: 120ms ease;
  --motion: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion: 0ms;
  }
}