/* ══════════════════════════════════════════════════════════════
   Principal Paid theme — tokens ("Swiss")
   Black and white with heavy rules; colour is reserved for the data
   (green = custom plan / positive, red = interest / negative).
   Every colour, size and spacing value used on the site lives here.
   Load order: tokens.css → base.css → layout.css → components.css
   Mobile breakpoint is 680px everywhere (media queries can't use vars).
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Fonts ── (the Google Fonts link in each page's <head> must load these) */
  --font-display: 'Archivo', Helvetica, Arial, sans-serif;   /* titles, brand, headline figures */
  --font-text: 'Archivo', Helvetica, Arial, sans-serif;      /* everything else, incl. chart labels */

  /* ── Font weights ── */
  --fw-display: 800;   /* titles, brand, headline figures */
  --fw-label: 600;     /* labels, nav links, table headers */
  --fw-button: 800;
  --fw-strong: 600;    /* emphasis inside small text */

  /* ── Type scale ── */
  --fs-2xs: 10px;    /* pills, badges, micro labels */
  --fs-xs: 11px;     /* eyebrows, table headers, hints */
  --fs-sm: 12px;     /* field labels, sub-values, footer, tooltips */
  --fs-base: 13px;   /* tables, buttons, subtitles, result text */
  --fs-md: 14px;     /* selects, callouts */
  --fs-lg: 15px;     /* article body, compact inputs */
  --fs-input: 16px;  /* form inputs (16px avoids iOS zoom) */
  --fs-h2: 20px;     /* article headings */
  --fs-title: 32px;  /* page titles, section titles */
  --fs-brand: 24px;  /* nav brand */
  --fs-stat: 36px;   /* headline result figures */

  /* ── Letter spacing ── */
  --ls-tight: -0.03em;   /* large figures */
  --ls-title: -0.03em;   /* headings, brand */
  --ls-body: 0;          /* body and small text */
  --ls-caps: 0.05em;     /* small uppercase: pills, badges */
  --ls-label: 0.06em;    /* uppercase labels, buttons, nav links, table headers */
  --ls-eyebrow: 0.08em;  /* section eyebrows */

  /* ── Line height ── */
  --lh-title: 1.15;
  --lh-ui: 1.7;
  --lh-prose: 1.9;

  /* ── Spacing scale ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* ── Layout ── */
  --container: 960px;
  --prose: 680px;
  --gutter: 24px;
  --nav-h: 56px;
  --control-h: 50px;     /* height of a standard input / select */

  /* ── Shape & motion ── */
  --radius: 0;           /* controls and cards are square */
  --radius-sm: 0;
  --rule-w: 2px;         /* structural rules: under the nav and page header */
  --ease: 0.2s;
  --ease-reveal: 0.5s ease;

  /* ── Colour: dark (default) ── */
  --bg: #0a0a0a;
  --surface: #171717;
  --surface-raised: #171717;   /* dropdown panels, tooltips */
  --border: #f2f2f2;           /* strong lines: rules, control outlines, dividers */
  --row-border: #333333;       /* soft lines: table rows, chart grid, tracks */
  --text: #f5f5f5;
  --muted: #a0a0a0;
  --accent: #f5f5f5;           /* primary: buttons, figures, main chart series */
  --accent-dim: #f5f5f5;       /* outlined button / badge borders, link underlines */
  --green: #3ddc84;            /* custom plan, positive */
  --green-strong: #3ddc84;     /* green for small text (darker in light mode) */
  --red: #ff4d5e;              /* interest, negative */
  --on-accent: #0a0a0a;        /* text on an accent background */

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f5f5f5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ── Charts (read by theme/chart.js) ── */
  --chart-primary: var(--accent);     /* standard schedule / main series */
  --chart-secondary: var(--green);    /* custom repayment, vehicle value */
  --chart-danger: var(--red);
  --chart-muted: var(--muted);        /* axis labels, marker lines */
  --chart-grid: var(--row-border);
  --chart-bg: var(--bg);
  --chart-fill-1: rgba(245,245,245,0.18);    /* area gradient top */
  --chart-fill-2: rgba(245,245,245,0.02);    /* area gradient bottom */
  --chart-hover: rgba(245,245,245,0.4);      /* crosshair */
  --chart-reference: rgba(245,245,245,0.45); /* dashed reference lines */
  --chart-danger-fill: rgba(255,77,94,0.12);
  --chart-danger-line: rgba(255,77,94,0.45);
  --chart-font-size: 10;
  --chart-line-width: 2.5;
}

/* ── Colour: light ──
   Declared twice: once for the OS preference (unless the user forced dark),
   once for the explicit toggle. Keep the two blocks identical. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff;
    --surface: #f3f3f0;
    --surface-raised: #ffffff;
    --border: #0a0a0a;
    --row-border: #d6d6d2;
    --text: #0a0a0a;
    --muted: #5c5c5c;
    --accent: #0a0a0a;
    --accent-dim: #0a0a0a;
    --green: #00804a;
    --green-strong: #00703f;
    --red: #e4002b;
    --on-accent: #ffffff;

    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230a0a0a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --chart-fill-1: rgba(10,10,10,0.16);
    --chart-fill-2: rgba(10,10,10,0.02);
    --chart-hover: rgba(10,10,10,0.4);
    --chart-reference: rgba(10,10,10,0.45);
    --chart-danger-fill: rgba(228,0,43,0.09);
    --chart-danger-line: rgba(228,0,43,0.35);
  }
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f3f3f0;
  --surface-raised: #ffffff;
  --border: #0a0a0a;
  --row-border: #d6d6d2;
  --text: #0a0a0a;
  --muted: #5c5c5c;
  --accent: #0a0a0a;
  --accent-dim: #0a0a0a;
  --green: #00804a;
  --green-strong: #00703f;
  --red: #e4002b;
  --on-accent: #ffffff;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230a0a0a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --chart-fill-1: rgba(10,10,10,0.16);
  --chart-fill-2: rgba(10,10,10,0.02);
  --chart-hover: rgba(10,10,10,0.4);
  --chart-reference: rgba(10,10,10,0.45);
  --chart-danger-fill: rgba(228,0,43,0.09);
  --chart-danger-line: rgba(228,0,43,0.35);
}

@media (max-width: 680px) {
  :root {
    --gutter: 16px;
    --fs-title: 26px;
    --fs-brand: 20px;
    --fs-stat: 32px;
  }
}