/**
 * MiCRO Design Tokens
 * ---------------------------------------------------------------------------
 * Single source of truth for the visual language. Nothing else in the codebase
 * may hardcode a colour, font size, spacing value, radius or shadow.
 *
 * Load order matters:
 *   1. bootstrap.min.css
 *   2. tokens.css      <-- this file (overrides Bootstrap's own variables)
 *   3. microrisk.css   (component styles, consuming tokens only)
 *
 * Ramps are generated in OKLCH for perceptually even steps. Every value used
 * for text or borders is WCAG-verified; the ratio is noted inline.
 *
 * @see docs/ui/GUIDELINES.md
 */

:root {
    /* =========================================================================
     1. RAW PALETTE — brand
     These are ingredients, not roles. Never reference --mr-blue-600 directly
     in a component; use the role tokens in section 4.
     ========================================================================= */

    /* Primary — derived from brand #00549f, which is pinned at step 700.
     This is the interactive colour: links, primary buttons, focus, active nav. */
    --mr-blue-50: #ecf7ff;
    --mr-blue-100: #d8edff;
    --mr-blue-200: #b6daff;
    --mr-blue-300: #8dc2ff;
    --mr-blue-400: #65a5f0;
    --mr-blue-500: #4389d8;
    /* 3.62:1 on white — UI/borders only, not text */
    --mr-blue-600: #296eba;
    /* 5.21:1 — AA text */
    --mr-blue-700: #00549f;
    /* 7.58:1 — BRAND, AAA text */
    --mr-blue-800: #003c77;
    /* 10.98:1 */
    --mr-blue-900: #002652;
    /* 15.01:1 */

    /* Accent — derived from brand #00a4e4, pinned at step 500.
     Decorative only: headers, emphasis bars, chart series, dark surfaces.
     Step 500 is 2.83:1 and MUST NOT carry text or icons on white.
     Use step 600 when the cyan needs to be legible. */
    --mr-cyan-50: #e8f9ff;
    --mr-cyan-100: #d0f0ff;
    --mr-cyan-200: #a7e0ff;
    --mr-cyan-300: #73c9fa;
    --mr-cyan-400: #38aee9;
    --mr-cyan-500: #00a4e4;
    /* 2.83:1 — BRAND, decorative surfaces only */
    --mr-cyan-600: #0077b2;
    /* 4.90:1 — AA text, the legible cyan */
    --mr-cyan-700: #005d8d;
    /* 7.12:1 */
    --mr-cyan-800: #00436a;
    /* 10.44:1 */
    --mr-cyan-900: #002b49;
    /* 14.57:1 */

    /* =========================================================================
     2. RAW PALETTE — neutrals
     Slightly blue-tinted so greys sit in the same family as the brand.
     These carry ~80% of the interface.
     ========================================================================= */
    --mr-gray-0: #ffffff;
    --mr-gray-50: #f4f6f8;
    --mr-gray-100: #e8ebee;
    --mr-gray-200: #d2d7de;
    --mr-gray-300: #b7bec7;
    --mr-gray-400: #9ba3ae;
    --mr-gray-500: #7f8893;
    /* 3.59:1 — placeholder/disabled, not body text */
    --mr-gray-600: #666e79;
    /* 5.16:1 — AA, muted text */
    --mr-gray-700: #4e555f;
    /* 7.53:1 — secondary text */
    --mr-gray-800: #373e46;
    /* 10.83:1 */
    --mr-gray-900: #23272d;
    /* 15.00:1 — body text */
    --mr-gray-950: #14171a;

    /* =========================================================================
     3. RAW PALETTE — status & perils
     Status = what happened. Peril = which hazard. Kept in separate scales so a
     "triggered" event reads the same regardless of whether it is flood or drought.
     ========================================================================= */

    /* Status — text values are AA on white; -border for outlines; -bg for fills */
    --mr-success: #0a7e3a;
    /* 5.17:1 */
    --mr-success-border: #399d57;
    --mr-success-bg: #e8f9eb;
    --mr-warning: #935b00;
    /* 5.62:1 */
    --mr-warning-border: #b97600;
    --mr-warning-bg: #fff1df;
    --mr-danger: #b6322d;
    /* 6.03:1 */
    --mr-danger-border: #d9544b;
    --mr-danger-bg: #ffece8;
    --mr-info: #0072ab;
    /* 5.26:1 */
    --mr-info-border: #0091d0;
    --mr-info-bg: #e4f7ff;

    /* Peril families — colour groups the phenomenon type, the icon and label
     carry the specific peril. One hue per peril stops being distinguishable
     past four or five, and the catalogue keeps growing. */
    --mr-peril-hydro: #006ca2;
    /* 5.73:1 — rainfall, initial rainfall, flood */
    --mr-peril-hydro-bg: #e0f3ff;
    --mr-peril-hydro-deep: #004972;
    --mr-peril-hydro-deep-bg: #cff1ff;
    --mr-peril-climate: #905300;
    /* 6.13:1 — drought */
    --mr-peril-climate-bg: #feeddb;
    --mr-peril-geo: #87553e;
    /* 6.18:1 — earthquake */
    --mr-peril-geo-bg: #f9ede8;

    /* =========================================================================
     4. ROLE TOKENS
     What components actually consume. Remapped wholesale in dark mode.
     ========================================================================= */
    --mr-surface: var(--mr-gray-0);
    --mr-surface-sunken: var(--mr-gray-50);
    --mr-surface-raised: var(--mr-gray-0);
    --mr-surface-inverse: var(--mr-blue-900);

    --mr-text: var(--mr-gray-900);
    --mr-text-secondary: var(--mr-gray-700);
    --mr-text-muted: var(--mr-gray-600);
    --mr-text-disabled: var(--mr-gray-500);
    --mr-text-on-brand: var(--mr-gray-0);

    --mr-border: var(--mr-gray-200);
    --mr-border-strong: var(--mr-gray-300);
    --mr-border-focus: var(--mr-blue-600);

    --mr-interactive: var(--mr-blue-700);
    --mr-interactive-hover: var(--mr-blue-800);
    --mr-interactive-active: var(--mr-blue-900);
    --mr-interactive-subtle: var(--mr-blue-50);

    --mr-focus-ring: 0 0 0 3px rgba(0, 84, 159, 0.35);

    /* Table roles — data density is the point of this product */
    --mr-table-header-bg: var(--mr-gray-50);
    --mr-table-border: var(--mr-gray-200);
    --mr-table-stripe: var(--mr-gray-50);
    --mr-table-hover: var(--mr-blue-50);

    /* =========================================================================
     5. TYPOGRAPHY
     System stack: zero webfont payload, no CDN, no FOUT. Numeric data is set
     in the mono face — event IDs, index codes (1D-RD-RP), discharge values,
     coordinates and return periods must align and be unambiguous.
     ========================================================================= */
    --mr-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        "Noto Sans", Arial, sans-serif;
    --mr-font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo,
        Consolas, "Liberation Mono", monospace;

    --mr-text-2xs: 0.6875rem;
    /* 11px — table meta, timestamps */
    --mr-text-xs: 0.75rem;
    /* 12px — badges, captions */
    --mr-text-sm: 0.8125rem;
    /* 13px — table body, dense forms */
    --mr-text-base: 0.875rem;
    /* 14px — UI default (ops tool, not marketing) */
    --mr-text-md: 1rem;
    /* 16px — long-form body */
    --mr-text-lg: 1.125rem;
    /* 18px */
    --mr-text-xl: 1.375rem;
    /* 22px — page title */
    --mr-text-2xl: 1.75rem;
    /* 28px */

    --mr-weight-normal: 400;
    --mr-weight-medium: 500;
    --mr-weight-semibold: 600;
    --mr-weight-bold: 700;

    --mr-leading-tight: 1.25;
    --mr-leading-normal: 1.5;
    --mr-leading-loose: 1.7;

    --mr-tracking-wide: 0.02em;
    --mr-tracking-caps: 0.06em;
    /* uppercase table headers */

    /* =========================================================================
     6. SPACING — 4px base
     ========================================================================= */
    --mr-space-1: 0.25rem;
    /*  4px */
    --mr-space-2: 0.5rem;
    /*  8px */
    --mr-space-3: 0.75rem;
    /* 12px */
    --mr-space-4: 1rem;
    /* 16px */
    --mr-space-5: 1.5rem;
    /* 24px */
    --mr-space-6: 2rem;
    /* 32px */
    --mr-space-7: 3rem;
    /* 48px */
    --mr-space-8: 4rem;
    /* 64px */

    --mr-cell-y: 0.5rem;
    /* table cell padding — compact by design */
    --mr-cell-x: 0.75rem;

    /* =========================================================================
     7. RADII, SHADOWS, MOTION, LAYERS
     Restrained: this is an instrument panel, not a consumer app.
     ========================================================================= */
    --mr-radius-sm: 3px;
    --mr-radius: 5px;
    --mr-radius-lg: 8px;
    --mr-radius-pill: 999px;

    --mr-shadow-sm: 0 1px 2px rgba(23, 39, 58, 0.08);
    --mr-shadow: 0 2px 6px rgba(23, 39, 58, 0.10);
    --mr-shadow-lg: 0 8px 24px rgba(23, 39, 58, 0.14);

    --mr-duration-fast: 100ms;
    --mr-duration: 160ms;
    --mr-ease: cubic-bezier(0.2, 0, 0.2, 1);

    --mr-z-base: 1;
    --mr-z-sticky: 100;
    --mr-z-header: 200;
    --mr-z-dropdown: 300;
    --mr-z-overlay: 400;
    --mr-z-modal: 500;
    --mr-z-toast: 600;

    --mr-sidebar-width: 15rem;
    --mr-header-height: 3.25rem;

    /* =========================================================================
     8. BOOTSTRAP 5.3 BRIDGE
     Bootstrap consumes its own custom properties, so overriding them here
     re-themes every component without recompiling Sass.
     ========================================================================= */
    --bs-primary: var(--mr-blue-700);
    --bs-primary-rgb: 0, 84, 159;
    --bs-secondary: var(--mr-gray-600);
    --bs-secondary-rgb: 102, 110, 121;
    --bs-success: var(--mr-success);
    --bs-success-rgb: 10, 126, 58;
    --bs-warning: var(--mr-warning);
    --bs-warning-rgb: 147, 91, 0;
    --bs-danger: var(--mr-danger);
    --bs-danger-rgb: 182, 50, 45;
    --bs-info: var(--mr-info);
    --bs-info-rgb: 0, 114, 171;

    --bs-body-bg: var(--mr-surface);
    --bs-body-color: var(--mr-text);
    --bs-body-font-family: var(--mr-font-sans);
    --bs-body-font-size: var(--mr-text-base);
    --bs-body-line-height: var(--mr-leading-normal);
    --bs-font-monospace: var(--mr-font-mono);

    --bs-border-color: var(--mr-border);
    --bs-border-radius: var(--mr-radius);
    --bs-border-radius-sm: var(--mr-radius-sm);
    --bs-border-radius-lg: var(--mr-radius-lg);
    --bs-border-radius-pill: var(--mr-radius-pill);

    --bs-link-color: var(--mr-interactive);
    --bs-link-color-rgb: 0, 84, 159;
    --bs-link-hover-color: var(--mr-interactive-hover);
    --bs-link-hover-color-rgb: 0, 60, 119;

    --bs-emphasis-color: var(--mr-gray-950);
    --bs-secondary-color: var(--mr-text-secondary);
    --bs-tertiary-color: var(--mr-text-muted);
    --bs-tertiary-bg: var(--mr-surface-sunken);
}

/* ===========================================================================
   9. DARK MODE
   Only role tokens are remapped — raw ramps stay put. Activated by setting
   data-bs-theme="dark" on <html>.
   =========================================================================== */
[data-bs-theme="dark"] {
    --mr-surface: #12161b;
    --mr-surface-sunken: #0d1014;
    --mr-surface-raised: #1a1f26;
    --mr-surface-inverse: var(--mr-gray-50);

    --mr-text: #e6e9ed;
    --mr-text-secondary: #b2b9c2;
    --mr-text-muted: #8b949f;
    --mr-text-disabled: #6b727c;

    /* Text sitting ON --mr-interactive, not on the page. The interactive role
     flips to a light cyan below, so this has to flip with it: white on
     #38aee9 is 2.4:1. Ink on the same cyan is 7.9:1. */
    --mr-text-on-brand: var(--mr-gray-950);

    --mr-border: #2a323b;
    --mr-border-strong: #3b444f;
    --mr-border-focus: var(--mr-cyan-400);

    /* Dark surfaces invert the brand roles: the cyan finally becomes legible,
     so it takes over as the interactive colour. */
    --mr-interactive: var(--mr-cyan-400);
    --mr-interactive-hover: var(--mr-cyan-300);
    --mr-interactive-active: var(--mr-cyan-200);
    --mr-interactive-subtle: rgba(0, 164, 228, 0.12);

    --mr-focus-ring: 0 0 0 3px rgba(56, 174, 233, 0.45);

    --mr-success: #4fbe77;
    --mr-success-bg: rgba(79, 190, 119, 0.12);
    --mr-warning: #d9a33a;
    --mr-warning-bg: rgba(217, 163, 58, 0.12);
    --mr-danger: #e8756c;
    --mr-danger-bg: rgba(232, 117, 108, 0.12);
    --mr-info: #4bb6e8;
    --mr-info-bg: rgba(75, 182, 232, 0.12);

    --mr-peril-hydro: #60b9ea;
    --mr-peril-hydro-bg: rgba(96, 185, 234, 0.12);
    --mr-peril-hydro-deep: #4aa3d2;
    --mr-peril-hydro-deep-bg: rgba(74, 163, 210, 0.14);
    --mr-peril-climate: #e19f4a;
    --mr-peril-climate-bg: rgba(225, 159, 74, 0.12);
    --mr-peril-geo: #d1a28d;
    --mr-peril-geo-bg: rgba(209, 162, 141, 0.12);

    --mr-table-header-bg: #1a1f26;
    --mr-table-border: #2a323b;
    --mr-table-stripe: rgba(255, 255, 255, 0.02);
    --mr-table-hover: rgba(0, 164, 228, 0.08);

    --bs-body-bg: var(--mr-surface);
    --bs-body-color: var(--mr-text);
    --bs-border-color: var(--mr-border);
    --bs-link-color: var(--mr-interactive);
    --bs-tertiary-bg: var(--mr-surface-sunken);
}

/* ===========================================================================
   10. BASELINE
   The minimum needed for tokens to take effect. Component styles live in
   microrisk.css.
   =========================================================================== */

/* Numeric data must align across rows. Non-negotiable in a monitoring UI. */
.mr-num,
td.mr-num,
.table td.mr-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: right;
}

/* Identifiers and codes: event IDs, index codes, coordinates. */
.mr-code {
    font-family: var(--mr-font-mono);
    font-size: 0.9em;
    letter-spacing: -0.01em;
}

/* Focus must be visible for keyboard users — Foundation 5 hid it. */
:focus-visible {
    outline: 2px solid var(--mr-border-focus);
    outline-offset: 2px;
    box-shadow: var(--mr-focus-ring);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}