/* =============================================================================
   SanlamAllianz Design Tokens — Single Source of Truth
   =============================================================================
   Provenance: extracted from https://ug.sanlamallianz.com/general-insurance/retail
   (assets/frontend/css/style.css) on 2026-06-12. Hex values below are the exact
   values used by the live brand site. See docs/design-system.md for the full
   extraction record, contrast matrix, and component recipes.

   Layering: this file loads AFTER vendor core.css and BEFORE sanlam.css in
   every base template. Components consume the semantic --sa-* tokens; only
   this file may branch on [data-bs-theme="dark"] for token VALUES.
   ============================================================================= */

:root {
  /* ── 1. Brand primitives (theme-invariant) ──────────────────────────────── */
  --sa-blue-600: #0075c9;        /* primary brand blue (dominant on live site) */
  --sa-blue-600-rgb: 0, 117, 201;
  --sa-blue-700: #005fa3;        /* hover step of brand blue */
  --sa-blue-800: #004f88;        /* active step of brand blue */
  --sa-navy-800: #003781;        /* Allianz navy (live-site value) */
  --sa-navy-800-rgb: 0, 55, 129;
  --sa-blue-200: #acd2ed;        /* light brand blue (live) */
  --sa-blue-100: #deeff7;        /* pale brand blue (live) */
  --sa-blue-50: #eaf5fb;         /* brand wash (live) */
  --sa-ink-900: #333e48;         /* primary ink (live) */
  --sa-ink-700: #464e58;         /* secondary ink (live) */
  --sa-gray-500: #8a929c;        /* muted text (live) */
  --sa-gray-300: #bcc4ce;        /* disabled / faint (live) */
  --sa-gray-200: #e0e4e9;        /* hairlines (live) */
  --sa-gray-100: #ebeef1;        /* subtle fills (live) */
  --sa-gray-50: #f6f8fb;         /* page wash (live) */
  --sa-red-600: #cb333b;         /* brand red (live) */
  --sa-red-600-rgb: 203, 51, 59;
  --sa-amber-500: #f2a900;       /* brand amber (live) */
  --sa-amber-700: #8a6100;       /* amber deep — AA text on light surfaces */
  --sa-green-300: #7bcb90;       /* brand soft green (live) */
  --sa-green-700: #2e7d43;       /* green deep — AA text on light surfaces */
  --sa-cyan-500: #0d9fd4;        /* brand light blue (live) */
  --sa-cyan-700: #00729c;        /* cyan deep — AA text on light surfaces */
  --sa-orange-500: #e86b2b;      /* brand orange accent (live) */
  --sa-orange-500-rgb: 232, 107, 43;
  --sa-blue-dm: #5aafe6;         /* dark-mode primary (legibility on dark) */
  --sa-blue-dm-rgb: 90, 175, 230;

  /* Signature blue→navy gradient: hero bands, auth panels, footer band.
     A dark surface by nature — carries white text in BOTH themes. */
  --sa-gradient-brand: linear-gradient(90deg, var(--sa-blue-600) 0%, var(--sa-navy-800) 100%);
  --sa-gradient-brand-soft: linear-gradient(135deg, rgba(0, 117, 201, 0.08) 0%, rgba(0, 55, 129, 0.04) 100%);

  /* ── 3. Spacing (4px grid) ──────────────────────────────────────────────── */
  --sa-space-1: 0.25rem;   /*  4px */
  --sa-space-2: 0.5rem;    /*  8px */
  --sa-space-3: 0.75rem;   /* 12px */
  --sa-space-4: 1rem;      /* 16px */
  --sa-space-5: 1.25rem;   /* 20px */
  --sa-space-6: 1.5rem;    /* 24px */
  --sa-space-7: 2rem;      /* 32px */
  --sa-space-8: 2.5rem;    /* 40px */
  --sa-space-9: 3rem;      /* 48px */
  --sa-space-10: 3.5rem;   /* 56px */
  --sa-space-11: 4rem;     /* 64px */
  --sa-space-12: 5rem;     /* 80px */

  /* ── 4. Typography ──────────────────────────────────────────────────────── */
  /* Public Sans (self-hosted) — open-licence stand-in for Allianz Neo with the
     same neutral humanist voice. Decision record: design-system.md §4. */
  --sa-font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --sa-text-xs: 0.8125rem;   /* 13px — captions, table meta */
  --sa-text-sm: 0.875rem;    /* 14px — secondary copy, dense tables */
  --sa-text-base: 0.9375rem; /* 15px — body */
  --sa-text-md: 1.0625rem;   /* 17px — card titles, leads */
  --sa-text-lg: 1.25rem;     /* 20px — section headings */
  --sa-text-xl: 1.5rem;      /* 24px — page titles */
  --sa-text-2xl: 1.875rem;   /* 30px — hero/KPI numerals */
  --sa-text-3xl: 2.375rem;   /* 38px — auth/marketing display */
  --sa-leading-tight: 1.25;
  --sa-leading-normal: 1.55;
  --sa-weight-regular: 400;
  --sa-weight-medium: 500;
  --sa-weight-semibold: 600;
  --sa-weight-bold: 700;
  --sa-tracking-caps: 0.08em;          /* uppercase micro-labels */
  --sa-numeric-tabular: "tnum" 1;      /* font-feature-settings for KPI numerals */

  /* ── 5. Radii ───────────────────────────────────────────────────────────── */
  --sa-radius-sm: 6px;     /* inputs, chips, small controls */
  --sa-radius: 10px;       /* cards, dropdowns, alerts */
  --sa-radius-lg: 14px;    /* modals, hero panels, feature cards */
  --sa-radius-pill: 999px; /* pills, badges, avatar */

  /* ── 7. Motion ──────────────────────────────────────────────────────────── */
  --sa-dur-1: 150ms;   /* hover/focus colour + border shifts */
  --sa-dur-2: 200ms;   /* lifts, reveals, accordion */
  --sa-dur-3: 300ms;   /* drawers, modals, skeleton shimmer ramp */
  --sa-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ── 8. Z-index map (mirrors Bootstrap/Vuexy; never guess) ──────────────── */
  --sa-z-dropdown: 1000;
  --sa-z-sticky: 1020;
  --sa-z-navbar: 1030;   /* Vuexy fixed menu uses 1080 — documented, not ours */
  --sa-z-backdrop: 1050;
  --sa-z-modal: 1055;
  --sa-z-popover: 1070;
  --sa-z-tooltip: 1080;
  --sa-z-toast: 1090;
}

/* ── 2. Semantic tokens (theme-flipping) ────────────────────────────────────
   Components consume ONLY these (plus primitives for brand-fixed surfaces
   like the gradient band). Values flip here, never inside components. */
:root,
[data-bs-theme="light"] {
  --sa-body-bg: var(--sa-gray-50);
  --sa-surface: #ffffff;            /* cards, panels, table bodies */
  --sa-surface-2: var(--sa-gray-50);/* page wash, subtle wells inside cards */
  --sa-surface-3: var(--sa-blue-50);/* brand-tinted wells, selected rows */
  --sa-text: var(--sa-ink-900);
  --sa-text-2: var(--sa-ink-700);
  --sa-text-3: var(--sa-gray-500);
  --sa-border: var(--sa-gray-200);
  --sa-border-strong: var(--sa-gray-300);
  --sa-link: var(--sa-blue-600);
  --sa-link-hover: var(--sa-blue-700);
  --sa-primary: var(--sa-blue-600);
  --sa-primary-rgb: var(--sa-blue-600-rgb);
  --sa-primary-hover: var(--sa-blue-700);
  --sa-primary-active: var(--sa-blue-800);
  --sa-primary-contrast: #ffffff;
  --sa-primary-soft: rgba(var(--sa-blue-600-rgb), 0.08);
  --sa-heading: var(--sa-navy-800);
  --sa-danger: var(--sa-red-600);
  --sa-danger-soft: rgba(var(--sa-red-600-rgb), 0.10);
  --sa-warning: var(--sa-amber-700);
  --sa-warning-accent: var(--sa-amber-500);
  --sa-warning-soft: rgba(242, 169, 0, 0.14);
  --sa-success: var(--sa-green-700);
  --sa-success-accent: var(--sa-green-300);
  --sa-success-soft: rgba(123, 203, 144, 0.18);
  --sa-info: var(--sa-cyan-700);
  --sa-info-accent: var(--sa-cyan-500);
  --sa-info-soft: rgba(13, 159, 212, 0.12);

  /* ── 6. Elevation ── */
  --sa-shadow-1: 0 1px 2px rgba(20, 30, 55, 0.05), 0 1px 3px rgba(20, 30, 55, 0.08);
  --sa-shadow-2: 0 4px 8px -2px rgba(20, 30, 55, 0.08), 0 2px 4px -1px rgba(20, 30, 55, 0.06);
  --sa-shadow-3: 0 16px 32px -8px rgba(20, 30, 55, 0.18), 0 4px 12px -2px rgba(20, 30, 55, 0.10);
  --sa-shadow-focus: 0 0 0 0.25rem rgba(var(--sa-blue-600-rgb), 0.22);
}

[data-bs-theme="dark"] {
  --sa-body-bg: #161d26;
  --sa-surface: #1f2832;
  --sa-surface-2: #1a222b;
  --sa-surface-3: rgba(var(--sa-blue-dm-rgb), 0.10);
  --sa-text: #e8edf2;
  --sa-text-2: #c2cbd4;
  --sa-text-3: #8f9aa6;
  --sa-border: rgba(255, 255, 255, 0.10);
  --sa-border-strong: rgba(255, 255, 255, 0.18);
  --sa-link: var(--sa-blue-dm);
  --sa-link-hover: #8ac8f0;
  --sa-primary: var(--sa-blue-dm);
  --sa-primary-rgb: var(--sa-blue-dm-rgb);
  --sa-primary-hover: #79bfec;
  --sa-primary-active: #4598d1;
  --sa-primary-contrast: #10222f;
  --sa-primary-soft: rgba(var(--sa-blue-dm-rgb), 0.14);
  --sa-heading: #aacdf1;
  --sa-danger: #e4606a;
  --sa-danger-soft: rgba(228, 96, 106, 0.16);
  --sa-warning: #f0b63d;
  --sa-warning-accent: #f2a900;
  --sa-warning-soft: rgba(242, 169, 0, 0.16);
  --sa-success: #6cbc87;
  --sa-success-accent: #7bcb90;
  --sa-success-soft: rgba(123, 203, 144, 0.14);
  --sa-info: #54bce4;
  --sa-info-accent: #0d9fd4;
  --sa-info-soft: rgba(13, 159, 212, 0.16);

  --sa-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.36);
  --sa-shadow-2: 0 4px 8px -2px rgba(0, 0, 0, 0.42), 0 2px 4px -1px rgba(0, 0, 0, 0.34);
  --sa-shadow-3: 0 16px 32px -8px rgba(0, 0, 0, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.40);
  --sa-shadow-focus: 0 0 0 0.25rem rgba(var(--sa-blue-dm-rgb), 0.30);
}

/* Reduced motion: collapse durations; components must not rely on transition
   end-events for correctness. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sa-dur-1: 1ms;
    --sa-dur-2: 1ms;
    --sa-dur-3: 1ms;
  }
}

/* ── 9. Compatibility aliases (TEMPORARY) ───────────────────────────────────
   Existing sanlam.css consumers re-point to live-site values through these.
   Remove in the cleanup work package once `grep -rn -- --sanlam-` is clean. */
:root {
  --sanlam-navy: var(--sa-navy-800);
  --sanlam-blue: var(--sa-blue-600);
  --sanlam-light: var(--sa-blue-50);
  --sanlam-blue-rgb: var(--sa-blue-600-rgb);
  --sanlam-navy-rgb: var(--sa-navy-800-rgb);
  --sanlam-mute: var(--sa-gray-500);
  --sanlam-hairline: var(--sa-gray-200);
  --sanlam-ink: var(--sa-ink-900);
  --sanlam-orange: var(--sa-orange-500);
  --sanlam-orange-rgb: var(--sa-orange-500-rgb);
  --sanlam-gradient: var(--sa-gradient-brand);
}

[data-bs-theme="dark"] {
  --sanlam-mute: var(--sa-text-3);
  --sanlam-hairline: var(--sa-border);
  --sanlam-ink: var(--sa-text);
}