:root {
  /* App is light-only; pin native controls so they don't invert under OS dark mode. */
  color-scheme: light;

  /* Hex values for raw-CSS consumers (non-Tailwind contexts) */
  /* Brand (Phase A.3): primary is the Sar forest green; gold is the ensō accent.
     The token keeps the name "navy" so the hundreds of bg-navy/text-navy utility
     usages flip to green with zero markup churn. */
  --color-navy:   #2D5A3D;
  --color-gold:   #B08D4A;
  --color-accent: #2D5A3D;
  --color-bg:     #F4F4F0;
  --color-card:   #FFFFFF;
  --color-stone:  #EAEAE2;
  --color-ok:     #166534;
  --color-warn:   #B45309;
  --color-danger: #B91C1C;
  --color-slate:  #64748B;

  /* Space-separated RGB channels — required for Tailwind v3 alpha-modifier syntax
     (`bg-navy/50`). Keep in sync with the hex values above. */
  --color-navy-rgb:    45  90  61;
  --color-gold-rgb:   176 141  74;
  --color-accent-rgb:  45  90  61;
  --color-ok-rgb:      22 101  52;
  --color-warn-rgb:   180  83   9;
  --color-danger-rgb: 185  28  28;

  --radius-card:  12px;
  --radius-input: 8px;
  --radius-pill:  9999px;

  /* Motion — durations + easings used across modals, panels, buttons, cards. */
  --motion-fast:    120ms;
  --motion-base:    180ms;
  --motion-slow:    280ms;
  --ease-standard:  cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-entry:     cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-exit:      cubic-bezier(0.4, 0.0, 1.0, 1.0);

  /* Refined elevation ladder (subtler than Tailwind's defaults). */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-3: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--color-bg);
}

/* Smooth focus rings on interactive elements */
:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/* Crisper text rendering on macOS / iOS. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Reduce motion if the user prefers it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}