/* css/theme.css
 *
 * SINGLE SOURCE OF TRUTH for every color, type, spacing, radius, shadow and
 * motion value in this app. No other CSS or JS file may hardcode a color,
 * font-size, or spacing value — everything reads a var(--token) from here.
 * This boundary is deliberate (per build plan §4.8): "Pine forest" is phase
 * one; a "Lego" (or other) reskin later is just a second block of variables
 * swapped in here, with zero changes needed anywhere else.
 *
 * NOTE on GL-003 (Team Knowledge/Guidelines/GL-003-design-system.md):
 * that vault-wide design system is still unpopulated (placeholder values).
 * This app's palette was specified directly by the build brief (pine
 * forest: deep greens, bark browns, muted moss/sage, warm cream text) and
 * is implemented here as the flagged exception the GL-003 process allows
 * ("work in flagged fallback mode ... note in the deliverable"). If this
 * becomes a persisted brand beyond this app, route to Iris to promote it
 * into GL-003 properly.
 *
 * Contrast targets: body text / muted text against --color-bg clears
 * WCAG 2.2 AA (>= 4.5:1) comfortably (~11:1 and ~7.5:1 respectively).
 * "-on-*" tokens are the correct text color to pair with their matching
 * background token; "-text" status variants are lightened for use as text
 * color directly on --color-bg (badges use the base status color as a
 * background with the dark --color-text-inverse on top instead).
 */

:root {
  /* ============ Backgrounds (pine forest floor, darkest to lightest) ============ */
  --color-bg: #141f18;             /* app canvas — deep forest floor */
  --color-bg-elevated: #1d2c22;    /* cards, nav, elevated surfaces */
  --color-bg-elevated-2: #26392c;  /* nested surfaces: inputs, table cells */
  --color-bg-inset: #0f1811;       /* recessed wells, progress-bar tracks */

  /* ============ Borders ============ */
  --color-border: #37483b;
  --color-border-strong: #4a5f4d;

  /* ============ Text ============ */
  --color-text: #f3ead9;           /* warm cream — primary text */
  --color-text-muted: #b7c3ac;     /* muted sage — secondary text/labels */
  --color-text-faint: #899686;     /* faint/disabled text — lightened ~10% from
                                       #7c8a78 (2026-07-15 QA fix): the original
                                       measured 4.01:1 on --color-bg-elevated
                                       (.field-hint), below WCAG AA's 4.5:1 text
                                       floor. New value: 4.72:1 on bg-elevated,
                                       5.46:1 on bg-canvas. Same hue, same "faint
                                       sage" character, just lighter. */
  --color-text-inverse: #14210c;   /* dark text for light/bright backgrounds */

  /* ============ Brand: primary (pine green), secondary (bark brown), accent (amber) ============ */
  --color-primary: #3f6b42;
  --color-primary-hover: #447147;  /* darkened ~10% from #4c7e4f (2026-07-15 QA
                                       fix): on-primary text over the original
                                       hover color measured 3.99:1, below AA's
                                       4.5:1 floor on every primary button's
                                       hover state app-wide. New value: 4.75:1. */
  --color-primary-active: #345a37;
  --color-on-primary: #f3ead9;

  --color-secondary: #6d4f37;
  --color-secondary-hover: #7f5f45;
  --color-on-secondary: #f3ead9;

  --color-accent: #c9a24a;         /* XP / currency / highlight color */
  --color-accent-hover: #d9b660;
  --color-on-accent: #21170a;

  /* ============ Status ============ */
  --color-success: #5e9c5e;
  --color-success-text: #8fd08f;   /* lightened, for direct text-on-bg use */
  --color-warning: #d3963c;
  --color-warning-text: #eab767;
  --color-error: #c07263;         /* lightened ~18% from #b25341 (2026-07-15 QA
                                       fix): .badge-error's --color-text-inverse
                                       text measured 3.36:1 against the original,
                                       below AA's 4.5:1 floor. New value: 4.65:1.
                                       Same warm rust-red hue, same status
                                       meaning — .btn-danger and .toast.is-error
                                       (which share this token) get the same
                                       contrast improvement as a side effect. */
  --color-error-text: #e2836d;
  --color-info: #5e8f9a;          /* lightened ~12% from #48808c (2026-07-15 QA
                                       fix): .badge-info's --color-text-inverse
                                       text measured 3.79:1 against the original,
                                       below AA's 4.5:1 floor. New value: 4.69:1.
                                       Same muted teal hue. */
  --color-info-text: #7db8c4;

  /* ============ Typography ============ */
  --font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --text-display: 2rem;      /* 32px */
  --text-h1: 1.5rem;         /* 24px */
  --text-h2: 1.25rem;        /* 20px */
  --text-h3: 1.1rem;         /* ~17.6px */
  --text-body: 1rem;         /* 16px */
  --text-caption: 0.8125rem; /* 13px */

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ============ Spacing scale (base unit 8px) ============ */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 64px;
  --space-2xl: 96px;

  /* ============ Radius ============ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ============ Shadow ============ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --scroll-shadow: rgba(0, 0, 0, 0.3); /* added 2026-07-15 QA fix: edge-fade
                                          affordance for horizontally-scrollable
                                          content (Week grid on mobile), same
                                          alpha family as --shadow-sm/-md. */

  /* ============ Motion ============ */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============ Focus ring (accent-based, visible on the dark canvas) ============ */
  --focus-ring: 0 0 0 3px rgba(201, 162, 74, 0.6);

  /* ============ Layout ============ */
  --max-content-width: 640px;
  --bottom-nav-height: 64px;
}

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