/*
 * HAVS Calculator design tokens
 * Single source of truth for colour, type, spacing and layout.
 * Source: docs/design/ (see DESIGN.md). Change brand values here, not in pages.
 */

:root {
  /* ---- Brand palette (01-logo-and-palette.png) ---- */
  --brand-navy: #0b2d5b;          /* Deep Navy */
  --brand-blue: #2563eb;          /* Electric Blue */
  --brand-teal: #14b8a6;          /* Teal */
  --brand-grey: #e5ecf4;          /* Cool Grey */
  --brand-neutral: #f8fafc;       /* Light Neutral */
  --brand-gradient: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 55%, var(--brand-teal) 100%);

  /* ---- Status (02-ui-components.png: badges & alerts) ---- */
  --status-safe: #16a34a;
  --status-safe-bg: #e8f7ee;
  --status-safe-text: #136b39;
  --status-safe-border: #a7e3c0;
  --status-action: #f59e0b;
  --status-action-bg: #fff4dd;
  --status-action-text: #8a5600;
  --status-action-border: #f8d68a;
  --status-limit: #dc2626;
  --status-limit-bg: #fde7e5;
  --status-limit-text: #a3231b;
  --status-limit-border: #f5b5b0;
  --status-draft-bg: #eef2f7;

  /* ---- Semantic colours (light theme) ---- */
  --bg: #ffffff;
  --bg-soft: var(--brand-neutral);
  --surface: #ffffff;
  --text: var(--brand-navy);
  --muted: #5a6b82;
  --border: var(--brand-grey);
  --field: #f3f6fa;
  --primary: var(--brand-navy);         /* primary button */
  --primary-hover: var(--brand-blue);   /* primary button hover */
  --primary-text: #ffffff;
  --link: var(--brand-blue);
  --accent-soft: #e8f0fe;
  --track: #eef1f5;
  --hero-glow: #dceaf8;
  --shadow: 0 10px 30px rgba(11, 45, 91, 0.08);
  --shadow-sm: 0 2px 8px rgba(11, 45, 91, 0.06);

  /* ---- HAVS System app shell (04-app-calculator-layout.png) ---- */
  --app-bg: #f3f6fa;
  --sidebar-bg: linear-gradient(180deg, #0b2d5b 0%, #0a2850 60%, #082242 100%);
  --sidebar-text: #c7d4e8;
  --sidebar-text-strong: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active: linear-gradient(90deg, #1d5f8a, #1a527c);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-width: 240px;
  --accent-teal: #0f9d8a;          /* Export PDF button */
  --accent-teal-hover: #0d8a79;
  --illus-bg: #e8f0fe;             /* tile behind tool illustrations (same in dark mode) */

  /* ---- Data series (timeline bars), fixed order; never status colours ---- */
  --series-1: #3b82f6;   /* validated: dataviz validate_palette.js, light + dark */
  --series-2: #c026d3;
  --series-3: #14b8a6;
  --series-4: #8b5cf6;
  --series-5: #0ea5e9;

  /* ---- Typography ---- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Montserrat", var(--font-sans);   /* logo wordmark only */
  --font-hand: "Caveat", "Segoe Print", cursive;  /* homepage slogan only */
  --accent-green: #3fcf6e;                        /* slogan brush strokes (decorative, not a status colour) */
  --wordmark-sub: #3b4660;                          /* "Calculator" in the wordmark */
  --fs-display: clamp(2.2rem, 5vw, 3.6rem);
  --fs-h2: clamp(1.5rem, 3vw, 1.9rem);
  --fs-h3: 1.05rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* ---- Spacing (03-layouts-and-structure.png §3) ---- */
  --space-hero-top: 120px;        /* hero top padding */
  --space-section: 96px;          /* between sections, and section bottom padding */
  --space-block: 64px;            /* content blocks within a section */
  --space-card-gap: 24px;         /* card grid gap */
  --space-form: 20px;             /* form element spacing */

  /* ---- Layout (03-layouts-and-structure.png §1) ---- */
  --container: 1200px;            /* desktop ≥ 1280px */
  --gutter: 24px;
  --nav-height: 76px;

  /* ---- Shape ---- */
  --radius-sm: 8px;
  --radius: 10px;                 /* buttons, inputs */
  --radius-md: 12px;
  --radius-lg: 18px;              /* cards, panels */
  --radius-pill: 999px;           /* badges, pill filters */

  color-scheme: light;
}

/* Tablet 768–1279px */
@media (max-width: 1279px) {
  :root { --container: 720px; --gutter: 20px; }
}
/* Mobile ≤ 767px */
@media (max-width: 767px) {
  :root {
    --container: 100%;
    --gutter: 16px;
    --nav-height: 64px;
    --space-hero-top: 48px;
    --space-section: 64px;
    --space-block: 40px;
  }
}

/* ---- Dark theme ----
 * Follows the system unless the toggle sets data-theme="light".
 * The same values are repeated for an explicit data-theme="dark".
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1422;
    --bg-soft: #0f1a2b;
    --surface: #142136;
    --text: #e8eef6;
    --muted: #9fb0c5;
    --border: #23344d;
    --field: #1a2a42;
    --primary: var(--brand-blue);
    --primary-hover: #3b82f6;
    --primary-text: #ffffff;
    --link: #7fb0ff;
    --accent-soft: #1a2c48;
    --track: #213350;
    --hero-glow: #13243d;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --app-bg: #0b1422;
    --series-1: #3b82f6; --series-2: #c026d3; --series-3: #0d9488; --series-4: #8b5cf6; --series-5: #0284c7;
    --sidebar-bg: linear-gradient(180deg, #08172c 0%, #071324 100%);
    --sidebar-active: linear-gradient(90deg, #1b4d78, #173f63);
    --status-safe-bg: #10301f;   --status-safe-text: #8ee2b1;   --status-safe-border: #1d5a39;
    --status-action-bg: #3a2c0c; --status-action-text: #f8cf7a; --status-action-border: #6b4f12;
    --status-limit-bg: #3d1614;  --status-limit-text: #ff9d95;  --status-limit-border: #6e2723;
    --status-draft-bg: #1a2a42;
    --wordmark-sub: #b6c2d3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1422;
  --bg-soft: #0f1a2b;
  --surface: #142136;
  --text: #e8eef6;
  --muted: #9fb0c5;
  --border: #23344d;
  --field: #1a2a42;
  --primary: var(--brand-blue);
  --primary-hover: #3b82f6;
  --primary-text: #ffffff;
  --link: #7fb0ff;
  --accent-soft: #1a2c48;
  --track: #213350;
  --hero-glow: #13243d;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --app-bg: #0b1422;
  --series-1: #3b82f6; --series-2: #c026d3; --series-3: #0d9488; --series-4: #8b5cf6; --series-5: #0284c7;
  --sidebar-bg: linear-gradient(180deg, #08172c 0%, #071324 100%);
  --sidebar-active: linear-gradient(90deg, #1b4d78, #173f63);
  --status-safe-bg: #10301f;   --status-safe-text: #8ee2b1;   --status-safe-border: #1d5a39;
  --status-action-bg: #3a2c0c; --status-action-text: #f8cf7a; --status-action-border: #6b4f12;
  --status-limit-bg: #3d1614;  --status-limit-text: #ff9d95;  --status-limit-border: #6e2723;
  --status-draft-bg: #1a2a42;
  --wordmark-sub: #b6c2d3;
  color-scheme: dark;
}