/* =====================================================================================================================
   FastAtPlatform design tokens (design v4 §12; docs/design/DESIGN_SYSTEM.md). The ONLY place colour values live.
   - --fast-brand-*: measured from the official logo masters (artwork). Never redefined per theme, never used for small text
     where it fails contrast.
   - --fast-*: accessible semantic UI tokens, light and dark. Components use these only.
   - Bootstrap's own variables are bound to them, so Bootstrap components follow the brand and both themes.
   Theme selection follows RapidForge RF-3: <html data-theme="light|dark" data-bs-theme="…"> rendered by the server from the
   theme cookie and resolved before first paint (no flash). Ratios quoted are WCAG 2.1 contrast, computed in design v4.
   ===================================================================================================================== */
:root,
html[data-theme="light"] {
    /* Brand artwork (measured from FastLogo.png / logo.png) */
    --fast-brand-blue: #08507C;
    --fast-brand-blue-deep: #044874;
    --fast-brand-teal: #0E9C9C;
    --fast-brand-orange: #FC7804;
    --fast-brand-orange-light: #F0B050;
    --fast-brand-ink: #143854;
    --fast-brand-paper: #EEF2F5;

    /* Surfaces */
    --fast-bg: #F3F7FA;
    --fast-surface: #FFFFFF;
    --fast-surface-2: #F3F7FA;
    --fast-surface-3: #E8EFF5;
    --fast-border: #D9E5EE;
    --fast-border-strong: #6F8796;          /* 3.76:1 on white — input / control boundaries (WCAG 1.4.11) */
    --fast-scrim: rgba(7, 24, 42, 0.45);

    /* Text */
    --fast-text: var(--fast-brand-ink);      /* 12.18:1 on white */
    --fast-text-muted: #4E6A7B;              /* 5.31:1 on --fast-bg */

    /* Actions */
    --fast-primary: var(--fast-brand-blue);  /* white text 8.58:1 */
    --fast-primary-hover: var(--fast-brand-blue-deep);
    --fast-on-primary: #FFFFFF;
    --fast-primary-tint: rgba(8, 80, 124, 0.08);
    --fast-teal: var(--fast-brand-teal);     /* 3.36:1 — large display text and icons only */
    --fast-teal-text: #0B7C7D;               /* 5.01:1 on white */
    --fast-teal-tint: rgba(14, 156, 156, 0.10);
    --fast-action-orange-bg: var(--fast-brand-orange);
    --fast-action-orange-hover: #E86C00;
    --fast-on-orange: #07182A;               /* 6.67:1 on orange; never white on orange (2.68:1) */
    --fast-orange-text: #A04A00;             /* 6.04:1 on white */
    --fast-accent: var(--fast-brand-orange);
    --fast-focus: var(--fast-brand-orange);

    /* Status (never used as brand accents) */
    --fast-success: #1D7A46;
    --fast-success-tint: rgba(29, 122, 70, 0.10);
    --fast-warning: #8A5A00;
    --fast-warning-tint: rgba(138, 90, 0, 0.10);
    --fast-danger: #B42318;
    --fast-danger-tint: rgba(180, 35, 24, 0.08);
    --fast-info: var(--fast-brand-blue);
    /* Text on the tinted status / teal badges (small text on a tint needs more than the plain-surface value). */
    --fast-success-strong: #166638;
    --fast-warning-strong: #7A4F00;
    --fast-danger-strong: #9F1F15;
    --fast-teal-strong: #086667;

    /* Skeleton */
    --fast-skeleton-from: #E6EDF3;
    --fast-skeleton-to: #F2F6F9;

    /* Elevation (overlays only; cards use borders) */
    --fast-shadow-overlay: 0 12px 32px rgba(7, 24, 42, 0.16), 0 2px 6px rgba(7, 24, 42, 0.08);

    /* Engineering Blueprint (approved Revision 2 / Revision 4 Enhanced) */
    --fast-rule: #C9D8E4;                    /* section rules: one step stronger than card borders */
    --fast-band: #143854;                    /* ink band (CTA) */
    --fast-on-band: #E6EEF5;
    --fast-on-band-muted: #A9BFCF;
    --fast-frame-tick: #0E9C9C;              /* blueprint frame ticks (decorative, never text) */
    --fast-screen-bg: #0B2740;               /* illustrative screen chrome */
    --fast-grid-line: rgba(111, 135, 150, 0.14);
    --fast-shot-shadow: 0 10px 28px rgba(7, 24, 42, 0.14), 0 2px 6px rgba(7, 24, 42, 0.06);

    /* Motion (approved motion system: feedback 100-240 ms, arrivals 420 ms; exits faster than entries) */
    --fast-m-instant: 100ms;
    --fast-m-fast: 160ms;
    --fast-m-base: 240ms;
    --fast-m-slow: 420ms;
    --fast-m-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --fast-m-in: cubic-bezier(0.4, 0, 1, 1);

    /* Typography */
    --fast-font-heading-latin: "Montserrat", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fast-font-body-latin: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fast-font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, Arial, sans-serif;
    --fast-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --fast-font-body: var(--fast-font-body-latin);
    --fast-font-heading: var(--fast-font-heading-latin);

    /* Spacing scale s1…s9 */
    --fast-s1: 4px;
    --fast-s2: 8px;
    --fast-s3: 12px;
    --fast-s4: 16px;
    --fast-s5: 24px;
    --fast-s6: 32px;
    --fast-s7: 48px;
    --fast-s8: 64px;
    --fast-s9: 96px;

    /* Shape and motion */
    --fast-radius-sm: 6px;
    --fast-radius: 10px;
    --fast-radius-lg: 16px;
    --fast-duration: 200ms;
    --fast-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --fast-touch: 44px;
    --fast-header-h: 72px;

    /* Bootstrap binding */
    --bs-body-bg: var(--fast-bg);
    --bs-body-color: var(--fast-text);
    --bs-secondary-color: var(--fast-text-muted);
    --bs-tertiary-bg: var(--fast-surface-2);
    --bs-border-color: var(--fast-border);
    --bs-link-color: var(--fast-primary);
    --bs-link-color-rgb: 8, 80, 124;
    --bs-link-hover-color: var(--fast-primary-hover);
    --bs-link-hover-color-rgb: 4, 72, 116;
    --bs-primary: #08507C;
    --bs-primary-rgb: 8, 80, 124;
    --bs-focus-ring-color: rgba(252, 120, 4, 0.45);
    --bs-border-radius: var(--fast-radius-sm);
    --bs-border-radius-lg: var(--fast-radius);
    --bs-body-font-family: var(--fast-font-body);
    --bs-emphasis-color: var(--fast-text);
}

html[data-theme="dark"] {
    --fast-bg: #081A2C;
    --fast-surface: #0E2439;
    --fast-surface-2: #13304A;
    --fast-surface-3: #183A57;
    --fast-border: #1E3A55;
    --fast-border-strong: #6684A0;           /* 4.04:1 on surface */
    --fast-scrim: rgba(0, 0, 0, 0.55);

    --fast-text: #E6EEF5;                    /* 15.0:1 */
    --fast-text-muted: #9DB3C3;              /* 8.1:1 on bg */

    --fast-primary: #5FA8D6;                 /* brand blue is 2.05:1 on dark, so never used here */
    --fast-primary-hover: #8CC5EA;
    --fast-on-primary: #07182A;
    --fast-primary-tint: rgba(95, 168, 214, 0.14);
    --fast-teal-text: #3CC0C0;
    --fast-teal-tint: rgba(60, 192, 192, 0.14);
    --fast-orange-text: #FFA24D;

    --fast-success: #5FD08F;
    --fast-success-tint: rgba(95, 208, 143, 0.14);
    --fast-warning: #F2C062;
    --fast-warning-tint: rgba(242, 192, 98, 0.14);
    --fast-danger: #FF8A80;
    --fast-danger-tint: rgba(255, 138, 128, 0.14);
    --fast-info: #5FA8D6;
    --fast-success-strong: #5FD08F;
    --fast-warning-strong: #F2C062;
    --fast-danger-strong: #FF8A80;
    --fast-teal-strong: #3CC0C0;

    --fast-skeleton-from: #16314A;
    --fast-skeleton-to: #1C3A56;
    --fast-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5);

    --fast-rule: #24445F;
    --fast-band: #04111F;                    /* darker than the page so the band still reads as a band */
    --fast-on-band: #E6EEF5;
    --fast-on-band-muted: #9DB3C3;
    --fast-frame-tick: #3CC0C0;
    --fast-screen-bg: #061525;
    --fast-grid-line: rgba(102, 132, 160, 0.16);
    --fast-shot-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);

    --bs-body-bg: var(--fast-bg);
    --bs-body-color: var(--fast-text);
    --bs-secondary-color: var(--fast-text-muted);
    --bs-tertiary-bg: var(--fast-surface-2);
    --bs-border-color: var(--fast-border);
    --bs-link-color: var(--fast-primary);
    --bs-link-color-rgb: 95, 168, 214;
    --bs-link-hover-color: var(--fast-primary-hover);
    --bs-link-hover-color-rgb: 140, 197, 234;
    --bs-primary: #5FA8D6;
    --bs-primary-rgb: 95, 168, 214;
    --bs-emphasis-color: var(--fast-text);
}

/* Scripts: Arabic everywhere uses IBM Plex Sans Arabic (Montserrat has no Arabic). Language, not direction, decides. */
html[lang="ar"],
:lang(ar) {
    --fast-font-body: var(--fast-font-arabic);
    --fast-font-heading: var(--fast-font-arabic);
}