/* RentItJA design tokens, rebrand of 3 Nov 2026 (design system approved by Jon; palette provisional until the partners review it).
   Every colour in the site lives here and nowhere else: change a value in this file and nothing else.
   Theme: always Light unless the person picks Dark in Appearance, which sets data-theme="dark" on <html>
   (public/js/theme.js). The OS setting is never read. Contrast of every pair in use: tests/contrast.test.js. */
:root {
  color-scheme: light;
  --surface: #F5F6FB; --surface-raised: #FFFFFF; --line: #DDE0EC; --ink: #0E1330; --ink-muted: #565C78;
  --cobalt: #2D3FE0; --cobalt-soft: #E3E7FF; --on-cobalt: #FFFFFF;
  --papaya: #FF6A3D; --papaya-ink: #B23A10; --seaglass: #14B88F; --seaglass-ink: #0A6E55; --on-accent: #0E1330;
  --success: #0F7A3E; --warning: #9A5B00; --danger: #C0262D;
  --shadow: 0 1px 2px rgba(14,19,48,.08), 0 4px 14px rgba(14,19,48,.06);
  --elev-2: 0 8px 28px rgba(14,19,48,.18);
  --scrim: rgba(14,19,48,.5);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0B0F24; --surface-raised: #151A33; --line: #2A3052; --ink: #EEF0FA; --ink-muted: #A3A8C3;
  --cobalt: #8090FF; --cobalt-soft: #1E2763; --on-cobalt: #0B0F24;
  --papaya: #FF8A5C; --papaya-ink: #FF9B73; --seaglass: #3FD6AE; --seaglass-ink: #4FDDB6; --on-accent: #0E1330;
  --success: #4ADE80; --warning: #FBBF24; --danger: #F87171;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
  --elev-2: 0 8px 28px rgba(0,0,0,.55);
  --scrim: rgba(0,0,0,.7);
}

/* Derived from the tokens above, so they follow either theme. Not in the approved palette: tints of its colours. */
:root {
  --cobalt-hover: color-mix(in srgb, var(--cobalt) 82%, var(--ink));
  --fill: color-mix(in srgb, var(--ink) 5%, var(--surface-raised));
  --line-strong: color-mix(in srgb, var(--ink-muted) 80%, var(--surface-raised));
  --focus: var(--cobalt);
  --success-soft: color-mix(in srgb, var(--success) 12%, var(--surface-raised));
  --warning-soft: color-mix(in srgb, var(--warning) 12%, var(--surface-raised));
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface-raised));
  --papaya-soft: color-mix(in srgb, var(--papaya) 16%, var(--surface-raised));
  --seaglass-soft: color-mix(in srgb, var(--seaglass) 16%, var(--surface-raised));
}

/* Type, spacing, radius, elevation. */
:root {
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Onest", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; /* order refs and codes only */
  --space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-10: 40px;
  --radius-sm: 8px; --radius-md: 16px; --radius-pill: 999px;
  --r-in: var(--radius-sm); --r-tag: var(--radius-sm); --r-card: var(--radius-md); --r-sheet: var(--radius-md);
  --r-btn: var(--radius-pill); --r-chip: var(--radius-pill);
  --fs-display-xl: 38px; --lh-display-xl: 42px; /* 56px and 58px from 1024px, see app.css */
  --fs-display-l: 36px; --lh-display-l: 40px;
  --fs-title: 24px; --lh-title: 30px;
  --fs-subtitle: 20px; --lh-subtitle: 26px;
  --fs-body-l: 18px; --lh-body-l: 28px;
  --fs-body: 16px; --lh-body: 24px;
  --fs-small: 14px; --lh-small: 20px;
  --fs-label: 14px; --lh-label: 20px;
  --fs-caption: 13px; --lh-caption: 18px;
  --elev-0: none;
  --elev-1: var(--shadow);
}