/* ==========================================================================
   Legacy Ledger — design tokens
   Framework-free CSS custom properties. Linked directly from the Django
   base templates (templates/base.html, templates/allauth/layouts/base.html)
   BEFORE base.css. No build step, no Tailwind required. No HTML tags in
   this comment: ZAP's SRI rule (90003) parses them out of the served CSS.

   Source of truth: docs/styleguide.md (extracted from the React prototype
   at legacy-ledger, tailwind.config.ts + src/index.css). Component classes
   that consume these tokens live in base.css, not here — this file holds
   custom properties only.

   Where the SOW's QED brand.css (docs/sow/assets/brand.css) differs, this
   file's product brand always wins inside the app — see
   docs/styleguide.md §12.
   ========================================================================== */

:root {
  /* ---- Core surfaces & text ---- */
  --ll-background: 210 20% 98%;
  --ll-foreground: 0 0% 9%;
  --ll-card: 0 0% 100%;
  --ll-card-foreground: 0 0% 9%;
  --ll-popover: 0 0% 100%;
  --ll-popover-foreground: 0 0% 9%;

  /* ---- Primary: British Racing Green ---- */
  --ll-primary: 153 100% 13%;
  --ll-primary-foreground: 0 0% 100%;

  /* ---- Secondary / muted ---- */
  --ll-secondary: 210 16% 96%;
  --ll-secondary-foreground: 153 100% 13%;
  --ll-muted: 210 16% 96%;
  --ll-muted-foreground: 215 14% 46%;

  /* ---- Accent: antique gold ---- */
  --ll-accent: 37 50% 58%;
  --ll-accent-foreground: 0 0% 9%;

  /* ---- Danger / destructive ---- */
  --ll-destructive: 0 65% 51%;
  --ll-destructive-foreground: 0 0% 100%;

  /* ---- Borders / inputs / focus ring ---- */
  --ll-border: 220 13% 91%;
  --ll-input: 220 13% 91%;
  --ll-ring: 153 100% 13%;

  /* ---- Radius ---- */
  --ll-radius: 0.5rem;
  --ll-radius-md: calc(var(--ll-radius) - 2px);
  --ll-radius-sm: calc(var(--ll-radius) - 4px);
  --ll-radius-surface: 0.75rem;

  /* ---- Heritage accents (status/decorative, sparingly) ---- */
  --ll-heritage-maroon: 0 100% 15%;
  --ll-heritage-sapphire: 215 60% 40%;
  --ll-heritage-rose: 340 18% 56%;

  /* ---- Semantic state colours ---- */
  --ll-success: 153 100% 13%;
  --ll-warning: 43 76% 38%;
  --ll-danger: 0 70% 55%;
  --ll-info: 215 60% 40%;

  /* ---- Grant state colours (invited | confirmed | revoked) ---- */
  --ll-state-invited: 43 76% 38%;
  --ll-state-confirmed: 153 100% 13%;
  --ll-state-revoked: 0 70% 55%;

  /* ---- Gift state colours (verified | waiting) ---- */
  --ll-state-verified: 153 100% 13%;
  --ll-state-waiting: 43 76% 38%;

  /* ---- Sidebar (dark navigation) ---- */
  --ll-sidebar-background: 153 100% 10%;
  --ll-sidebar-foreground: 43 30% 90%;
  --ll-sidebar-primary: 37 50% 58%;
  --ll-sidebar-primary-foreground: 0 0% 100%;
  --ll-sidebar-accent: 153 80% 15%;
  --ll-sidebar-accent-foreground: 43 30% 95%;
  --ll-sidebar-border: 153 60% 14%;

  /* ---- Adviser Terminal strip (dark header for adviser-mode pages) ---- */
  --ll-advisor-header: 0 0% 10%;
  --ll-advisor-header-foreground: 37 30% 92%;

  /* ---- Plan surface system (cards with no shadow) ---- */
  --ll-surface: 0 0% 100%;
  --ll-surface-border: 96 15% 87%;
  --ll-surface-cream: 52 67% 98%;
  --ll-ink: 120 28% 14%;
  --ll-ink-muted: 102 9% 56%;
  --ll-value-positive: 132 61% 26%;
  --ll-value-negative: 6 54% 46%;
  --ll-surface-border-width: 1px;
  --ll-surface-padding: 1rem;
  --ll-surface-gap: 0.75rem;

  /* ---- Typography ---- */
  --ll-font-heading: 'Libre Baskerville', Georgia, serif;
  --ll-font-body: 'Source Sans 3', system-ui, sans-serif;

  --ll-text-body: 18px;
  --ll-leading-body: 1.6;
  --ll-text-body-lg: 20px;
  --ll-leading-body-lg: 1.5;
  --ll-text-label: 16px;
  --ll-leading-label: 1.4;

  --ll-text-heading-sm: 24px;
  --ll-leading-heading-sm: 1.3;
  --ll-text-heading-md: clamp(24px, 4vw, 32px);
  --ll-leading-heading-md: 1.2;
  --ll-text-heading-lg: clamp(28px, 5vw, 40px);
  --ll-leading-heading-lg: 1.2;
  --ll-text-heading-xl: clamp(32px, 6vw, 48px);
  --ll-leading-heading-xl: 1.1;
  --ll-text-metric: clamp(28px, 7vw, 56px);
  --ll-leading-metric: 1.0;

  --ll-weight-body: 400;
  --ll-weight-medium: 500;
  --ll-weight-semibold: 600;
  --ll-weight-bold: 700;

  /* ---- Spacing scale (rem, 4px base) ---- */
  --ll-space-1: 0.25rem;
  --ll-space-2: 0.5rem;
  --ll-space-3: 0.75rem;
  --ll-space-4: 1rem;
  --ll-space-6: 1.5rem;
  --ll-space-8: 2rem;
  --ll-space-12: 3rem;
  --ll-space-16: 4rem;

  /* ---- Shadow ---- */
  --ll-shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --ll-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);

  /* ---- Touch target (mobile, 48px minimum) ---- */
  --ll-touch-target: 48px;
}

/* ==========================================================================
   Dark mode — present for parity even though the app ships light-only at
   launch. Toggle by adding class="dark" to <html>.
   ========================================================================== */
.dark {
  --ll-background: 0 10% 6%;
  --ll-foreground: 37 20% 88%;
  --ll-card: 0 10% 10%;
  --ll-card-foreground: 37 20% 88%;
  --ll-popover: 0 10% 10%;
  --ll-popover-foreground: 37 20% 88%;
  --ll-primary: 153 60% 35%;
  --ll-primary-foreground: 0 0% 100%;
  --ll-secondary: 0 10% 16%;
  --ll-secondary-foreground: 37 20% 88%;
  --ll-muted: 0 8% 16%;
  --ll-muted-foreground: 37 15% 60%;
  --ll-accent: 37 50% 50%;
  --ll-accent-foreground: 0 0% 10%;
  --ll-destructive: 0 62.8% 30.6%;
  --ll-destructive-foreground: 0 0% 100%;
  --ll-border: 0 8% 18%;
  --ll-input: 0 8% 18%;
  --ll-ring: 153 60% 35%;
}