/**
 * ============================================================================
 * tokens.css — Design Tokens (CSS Custom Properties)
 * ============================================================================
 *
 * PURPOSE:
 *   Single source of truth for all visual design values across the site.
 *   Every colour, font, spacing value, border, and transition used anywhere
 *   in the CSS must reference a token defined here.
 *
 * DESIGN DIRECTION:
 *   "Financial Times meets Monzo" — authoritative, trustworthy, modern.
 *   Serif headings (Source Serif 4) + sans body (Inter). Navy primary,
 *   off-white background, copper accent. Default theme follows system;
 *   user can override via theme toggle (light/dark/system).
 *
 * THEMES:
 *   - :root — light theme (default)
 *   - @media (prefers-color-scheme: dark) — dark theme when no user override
 *   - [data-theme="light"] / [data-theme="dark"] — user override
 *
 * ARCHITECTURE:
 *   Imported FIRST in the CSS load order. All other CSS files reference
 *   these variables via var(--token-name).
 *
 * RELATED FILES:
 *   - js/utils/chart-config.js — Reads token values at runtime for Chart.js
 *   - js/theme.js — Sets data-theme and dispatches themechange
 *
 * ============================================================================
 */

/* ==========================================================================
 * LIGHT THEME (default)
 * ========================================================================== */

:root {

  /* ========================================================================
   * COLOURS — Semantic. No hex/rgba in component CSS.
   * ======================================================================== */

  /* Page and content — warm off-white, dark grey text */
  --color-bg: #FAFAF7;
  --color-text: #3D3D3D;
  --color-text-muted: #6B6B6B;
  --color-border: #E0DDD8;
  --color-surface: #F2F1ED;

  /* Primary — deep navy. Header, footer, headings, key UI */
  --color-primary: #1B2A4A;
  --color-on-primary: #FFFFFF;
  --color-on-primary-muted: rgba(255, 255, 255, 0.7);
  --color-on-primary-subtle: rgba(255, 255, 255, 0.55);
  --color-on-primary-faint: rgba(255, 255, 255, 0.4);
  --color-on-primary-hover: rgba(255, 255, 255, 0.1);
  --color-on-primary-active: rgba(255, 255, 255, 0.12);

  /* Legacy aliases */
  --color-navy: var(--color-primary);
  --color-text-light: var(--color-text-muted);
  --color-white: #FFFFFF;

  /* Accent — muted copper/amber. CTAs, links, chart highlights */
  --color-accent: #C17D3A;
  --color-success: #2D7A4F;
  --color-warning: #C44536;

  /* Inputs */
  --color-input-bg: #FFFFFF;

  /* Chart/JS use (alpha for area fills) */
  --color-primary-alpha: rgba(27, 42, 74, 0.1);
  --color-accent-alpha: rgba(193, 125, 58, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);


  /* ========================================================================
   * TYPOGRAPHY — Serif headings + sans body (FT + Monzo)
   * ======================================================================== */

  --font-heading: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font sizes — modular scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-loose: 1.8;


  /* ========================================================================
   * SPACING — 4px-based scale
   * ======================================================================== */

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;


  /* ========================================================================
   * LAYOUT
   * ======================================================================== */

  --max-width: 56rem;
  --max-width-wide: 72rem;


  /* ========================================================================
   * BORDERS & SHAPES
   * ======================================================================== */

  --border-width: 1px;
  --border-color: var(--color-border);
  --border: var(--border-width) solid var(--border-color);

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;


  /* ========================================================================
   * TRANSITIONS
   * ======================================================================== */

  --transition-fast: 150ms ease;
  --transition-default: 200ms ease;
  --transition-slow: 400ms ease;
}


/* ==========================================================================
 * DARK THEME — System preference (no data-theme set)
 * ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #1A1D24;
    --color-text: #E8E6E3;
    --color-text-muted: #A8A6A2;
    --color-border: #3D4249;
    --color-surface: #252830;

    --color-primary: #1B2A4A;
    --color-on-primary: #FFFFFF;
    --color-on-primary-muted: rgba(255, 255, 255, 0.75);
    --color-on-primary-subtle: rgba(255, 255, 255, 0.6);
    --color-on-primary-faint: rgba(255, 255, 255, 0.45);
    --color-on-primary-hover: rgba(255, 255, 255, 0.1);
    --color-on-primary-active: rgba(255, 255, 255, 0.14);

    --color-white: #FFFFFF;
    --color-navy: var(--color-primary);
    --color-text-light: var(--color-text-muted);
    --color-accent: #D4956A;
    --color-success: #3D9B6B;
    --color-warning: #D65546;

    --color-input-bg: #252830;

    --color-primary-alpha: rgba(27, 42, 74, 0.4);
    --color-accent-alpha: rgba(212, 149, 106, 0.2);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  }
}


/* ==========================================================================
 * DARK THEME — User override
 * ========================================================================== */

[data-theme="dark"] {
  --color-bg: #1A1D24;
  --color-text: #E8E6E3;
  --color-text-muted: #A8A6A2;
  --color-border: #3D4249;
  --color-surface: #252830;

  --color-primary: #1B2A4A;
  --color-on-primary: #FFFFFF;
  --color-on-primary-muted: rgba(255, 255, 255, 0.75);
  --color-on-primary-subtle: rgba(255, 255, 255, 0.6);
  --color-on-primary-faint: rgba(255, 255, 255, 0.45);
  --color-on-primary-hover: rgba(255, 255, 255, 0.1);
  --color-on-primary-active: rgba(255, 255, 255, 0.14);

  --color-white: #FFFFFF;
  --color-navy: var(--color-primary);
  --color-text-light: var(--color-text-muted);
  --color-accent: #D4956A;
  --color-success: #3D9B6B;
  --color-warning: #D65546;

  --color-input-bg: #252830;

  --color-primary-alpha: rgba(27, 42, 74, 0.4);
  --color-accent-alpha: rgba(212, 149, 106, 0.2);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
}


/* ==========================================================================
 * LIGHT THEME — User override (overrides system dark)
 * ========================================================================== */

[data-theme="light"] {
  --color-bg: #FAFAF7;
  --color-text: #3D3D3D;
  --color-text-muted: #6B6B6B;
  --color-border: #E0DDD8;
  --color-surface: #F2F1ED;

  --color-primary: #1B2A4A;
  --color-on-primary: #FFFFFF;
  --color-on-primary-muted: rgba(255, 255, 255, 0.7);
  --color-on-primary-subtle: rgba(255, 255, 255, 0.55);
  --color-on-primary-faint: rgba(255, 255, 255, 0.4);
  --color-on-primary-hover: rgba(255, 255, 255, 0.1);
  --color-on-primary-active: rgba(255, 255, 255, 0.12);

  --color-white: #FFFFFF;
  --color-navy: var(--color-primary);
  --color-text-light: var(--color-text-muted);
  --color-accent: #C17D3A;
  --color-success: #2D7A4F;
  --color-warning: #C44536;

  --color-input-bg: #FFFFFF;

  --color-primary-alpha: rgba(27, 42, 74, 0.1);
  --color-accent-alpha: rgba(193, 125, 58, 0.1);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
}