/*
  Reachvoy design tokens: the single source for colours, type, shape and layout.
  Based on the AtDrive Group Brand Guidelines v1.0 (May 2026). Reference and rules:
  docs/design/brand-guidelines.md. Used by the Angular app (apps/web/src/styles.scss) and the static
  site (apps/site/assets/brand/, a synced copy: `pnpm nx run brand:sync-site`).

  Layers:
    --rv-brand-*   exact brand palette values. Never change these without a new brand version.
    --rv-*         derived values (marked "derived"), added where the guideline has none or where its
                   colour fails WCAG AA for that use. Each is documented in brand-guidelines.md §2.3.
    --rv-color-*   semantic tokens. Components use only these, so light/dark mode is one switch.

  Theme: light by default; dark follows the OS (prefers-color-scheme), or is forced with
  <html data-theme="light|dark">.
*/

:root {
  /* ── Brand palette (guideline §1.5, exact) ─────────────────────────────────────────────────── */
  --rv-brand-orange: #ff4401; /* Orange (Primary): logo, hero, icons, focus, large text */
  --rv-brand-orange-2: #ff6600; /* Orange 2: gradients, decorative highlights, dark-mode hover */
  --rv-brand-charcoal: #3d3d3d; /* Charcoal: secondary text, informational icons */
  --rv-brand-background: #fafafa; /* Background: page and card backgrounds */
  --rv-brand-text-primary: #000000; /* Text Primary */
  --rv-brand-text-secondary: #1e1e1e; /* Text Secondary */
  --rv-brand-navy: #0b1220; /* Navy / Blue 1: dark backgrounds, nav, headers, footers */
  --rv-brand-blue-2: #111827; /* Dark / Blue 2: dark sections, overlays */
  --rv-brand-white: #ffffff;
  --rv-brand-gray-disabled: #cccccc; /* Light Gray: disabled icons only (1.6:1, never for text) */

  /* ── Derived (not in the guideline; see brand-guidelines.md §2.3) ──────────────────────────── */
  /* Same hue as #FF4401, darkened until text and white labels pass WCAG AA (4.5:1) on light. */
  --rv-orange-700: #d63800; /* 4.75:1 on white, 4.55:1 on #FAFAFA; white label 4.75:1 */
  --rv-orange-800: #bc3200; /* hover/pressed of orange-700; white label 5.84:1 */
  --rv-border-light: #e5e5e5; /* decorative dividers on light */
  --rv-border-strong-light: #8c8c8c; /* input outlines on light, 3.2:1 (WCAG 1.4.11) */
  --rv-border-dark: #1f2937; /* decorative dividers on dark */
  --rv-border-strong-dark: #6b7280; /* input outlines on dark, 3.7:1 */
  --rv-text-muted-dark: #9ca3af; /* secondary text on dark, 7.4:1 on navy */
  --rv-text-secondary-dark: #e5e7eb; /* 14.3:1 on Blue 2 */
  --rv-icon-disabled-dark: #4b5563; /* disabled icons on dark (light gray #CCCCCC would look enabled) */
  /* Status colours (the guideline has none; brand orange must never mean "error"). */
  --rv-status-error-light: #b3261e;
  --rv-status-success-light: #1b7f3b;
  --rv-status-warning-light: #8a5a00;
  --rv-status-info-light: #1f5fad;
  --rv-status-error-dark: #f2b8b5;
  --rv-status-success-dark: #6fd08c;
  --rv-status-warning-dark: #f5c26b;
  --rv-status-info-dark: #8ab4f8;

  /* Chart series (derived, brand-guidelines.md §6): brand orange first, then blue, teal, magenta,
     violet, olive. Each theme has its own steps of the same hues: ≥ 3:1 against the surface and
     page background, and adjacent slots stay apart under simulated deuteranopia and protanopia
     (OKLab ΔE ≥ 12; brand.spec.ts checks both). Never reuse them for status. */
  --rv-chart-1: var(--rv-brand-orange);
  --rv-chart-2: #284cac;
  --rv-chart-3: #29a077;
  --rv-chart-4: #8f2166;
  --rv-chart-5: #887efb;
  --rv-chart-6: #988519;

  /* ── Typography (guideline §1.6) ───────────────────────────────────────────────────────────── */
  /* Poppins only; the fallbacks exist just for the moment before the self-hosted font loads. */
  --rv-font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rv-weight-regular: 400;
  --rv-weight-medium: 500;
  --rv-weight-semibold: 600;
  --rv-weight-bold: 700;

  /* Type ramp: size / line height / weight (guideline "Type Ramp", exact). */
  --rv-text-display: var(--rv-weight-bold) 56px / 72px var(--rv-font-family);
  --rv-text-h1: var(--rv-weight-bold) 32px / 50px var(--rv-font-family);
  --rv-text-h2: var(--rv-weight-semibold) 28px / 44px var(--rv-font-family);
  --rv-text-h3: var(--rv-weight-semibold) 24px / 40px var(--rv-font-family);
  --rv-text-subheading: var(--rv-weight-medium) 20px / 36px var(--rv-font-family);
  --rv-text-button: var(--rv-weight-semibold) 18px / 24px var(--rv-font-family);
  --rv-text-body-1: var(--rv-weight-regular) 18px / 32px var(--rv-font-family);
  --rv-text-body-2: var(--rv-weight-regular) 16px / 28px var(--rv-font-family);
  --rv-text-caption: var(--rv-weight-regular) 13px / 24px var(--rv-font-family);

  /* Product-UI density (derived, §3.3): dense app controls (tables, toolbars, form labels) where
     the website-scale ramp would be too large. Same family and weights. */
  --rv-text-ui-label: var(--rv-weight-medium) 14px / 20px var(--rv-font-family);
  --rv-text-ui-button: var(--rv-weight-semibold) 15px / 24px var(--rv-font-family);
  --rv-text-ui-body: var(--rv-weight-regular) 14px / 22px var(--rv-font-family);

  /* ── Shape (guideline §1.8.1) ──────────────────────────────────────────────────────────────── */
  --rv-radius-card: 8px; /* cards, panels, dialogs */
  --rv-radius-sharp: 0; /* technical tables, code blocks */
  --rv-radius-pill: 9999px; /* tags, badges, chips, CTA buttons */

  /* ── Layout (guideline §1.10). Breakpoints: mobile ≤768px, tablet ≤1024px, desktop >1024px. ── */
  --rv-container-max: 1280px;
  --rv-columns: 12;
  --rv-gutter: 16px;
  --rv-page-margin: 16px;

  /* Spacing on a 4px grid (derived; the guideline defines none). */
  --rv-space-1: 4px;
  --rv-space-2: 8px;
  --rv-space-3: 12px;
  --rv-space-4: 16px;
  --rv-space-5: 24px;
  --rv-space-6: 32px;
  --rv-space-7: 48px;
  --rv-space-8: 64px;

  /* ── Icons (guideline §1.7): Material Symbols Outlined, 24px, weight 400 (≈2px stroke). ─────── */
  --rv-icon-size: 24px;
  --rv-icon-size-min: 16px;

  /* ── Semantic colours: light theme (default) ───────────────────────────────────────────────── */
  color-scheme: light;
  --rv-color-bg: var(--rv-brand-background);
  --rv-color-surface: var(--rv-brand-white);
  --rv-color-surface-alt: var(--rv-brand-background);
  --rv-color-text: var(--rv-brand-text-primary);
  --rv-color-text-secondary: var(--rv-brand-text-secondary);
  --rv-color-text-muted: var(--rv-brand-charcoal);
  --rv-color-border: var(--rv-border-light);
  --rv-color-border-strong: var(--rv-border-strong-light);
  /* Interactive orange that carries normal-size text: buttons, links. */
  --rv-color-primary: var(--rv-orange-700);
  --rv-color-primary-hover: var(--rv-orange-800);
  --rv-color-on-primary: var(--rv-brand-white);
  /* Brand orange where WCAG allows it: icons, focus rings, large headings, graphics. */
  --rv-color-accent: var(--rv-brand-orange);
  --rv-color-accent-2: var(--rv-brand-orange-2);
  --rv-color-focus: var(--rv-brand-orange);
  --rv-color-icon: var(--rv-brand-charcoal);
  --rv-color-icon-disabled: var(--rv-brand-gray-disabled);
  /* Header/footer bands are navy in both themes (guideline: "nav, headers, footers"). */
  --rv-color-band: var(--rv-brand-navy);
  --rv-color-on-band: var(--rv-brand-white);
  --rv-color-on-band-muted: var(--rv-text-muted-dark);
  --rv-color-error: var(--rv-status-error-light);
  --rv-color-success: var(--rv-status-success-light);
  --rv-color-warning: var(--rv-status-warning-light);
  --rv-color-info: var(--rv-status-info-light);
  --rv-shadow-card: 0 1px 2px rgb(11 18 32 / 6%), 0 1px 3px rgb(11 18 32 / 10%);
}

/* Dark theme: navy surfaces; the exact brand orange passes AA here (5.4:1 on navy). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --rv-color-bg: var(--rv-brand-navy);
    --rv-color-surface: var(--rv-brand-blue-2);
    --rv-color-surface-alt: var(--rv-brand-navy);
    --rv-color-text: var(--rv-brand-white);
    --rv-color-text-secondary: var(--rv-text-secondary-dark);
    --rv-color-text-muted: var(--rv-text-muted-dark);
    --rv-color-border: var(--rv-border-dark);
    --rv-color-border-strong: var(--rv-border-strong-dark);
    --rv-color-primary: var(--rv-brand-orange);
    --rv-color-primary-hover: var(--rv-brand-orange-2);
    --rv-color-on-primary: var(--rv-brand-navy);
    --rv-color-icon: var(--rv-text-secondary-dark);
    --rv-color-icon-disabled: var(--rv-icon-disabled-dark);
    --rv-color-band: var(--rv-brand-blue-2);
    --rv-color-error: var(--rv-status-error-dark);
    --rv-color-success: var(--rv-status-success-dark);
    --rv-color-warning: var(--rv-status-warning-dark);
    --rv-color-info: var(--rv-status-info-dark);
    --rv-shadow-card: 0 1px 2px rgb(0 0 0 / 40%);
    --rv-chart-1: var(--rv-brand-orange);
    --rv-chart-2: #3a65d6;
    --rv-chart-3: #32a67d;
    --rv-chart-4: #af378d;
    --rv-chart-5: #857af7;
    --rv-chart-6: #9a861b;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --rv-color-bg: var(--rv-brand-navy);
  --rv-color-surface: var(--rv-brand-blue-2);
  --rv-color-surface-alt: var(--rv-brand-navy);
  --rv-color-text: var(--rv-brand-white);
  --rv-color-text-secondary: var(--rv-text-secondary-dark);
  --rv-color-text-muted: var(--rv-text-muted-dark);
  --rv-color-border: var(--rv-border-dark);
  --rv-color-border-strong: var(--rv-border-strong-dark);
  --rv-color-primary: var(--rv-brand-orange);
  --rv-color-primary-hover: var(--rv-brand-orange-2);
  --rv-color-on-primary: var(--rv-brand-navy);
  --rv-color-icon: var(--rv-text-secondary-dark);
  --rv-color-icon-disabled: var(--rv-icon-disabled-dark);
  --rv-color-band: var(--rv-brand-blue-2);
  --rv-color-error: var(--rv-status-error-dark);
  --rv-color-success: var(--rv-status-success-dark);
  --rv-color-warning: var(--rv-status-warning-dark);
  --rv-color-info: var(--rv-status-info-dark);
  --rv-shadow-card: 0 1px 2px rgb(0 0 0 / 40%);
  --rv-chart-1: var(--rv-brand-orange);
  --rv-chart-2: #3a65d6;
  --rv-chart-3: #32a67d;
  --rv-chart-4: #af378d;
  --rv-chart-5: #857af7;
  --rv-chart-6: #9a861b;
}