/*
 * Operator Portal — Tier 2: Semantic alias tokens
 * Story 20.1 — 3-tier design-token theming system (ADR-007 constraint 8)
 *
 * These are the tokens templates reference via semantic CSS classes.
 * Default = B3G light theme.  Redefined per theme via html[data-theme=...].
 * Tenant overrides add on top via the CSP-clean /theme/{tenantId}.css link.
 *
 * EXACT token names and values per epic-20-admin-operator-portal.md §"Design tokens".
 */

/* ── Default (B3G light theme) ─────────────────────────────────────────────── */
:root,
[data-theme="b3g"] {
  /* Color */
  --color-primary:        var(--b3g-blue-700);   /* #1B6FA8 — WCAG AA: #FFF on #1B6FA8 ≈ 5.40:1 ✓ */
  --color-primary-strong: var(--b3g-blue-700);
  --color-secondary:      var(--b3g-green-500);
  --color-accent:         var(--b3g-orange-500);
  --color-bg:             var(--b3g-gray-100);
  --color-surface:        var(--b3g-white);
  --color-text:           var(--b3g-ink-900);
  --color-on-primary:     var(--b3g-white);
  --color-success:        var(--b3g-green-500);
  --color-warning:        var(--b3g-orange-500);
  --color-danger:         var(--primitive-danger);
  --color-info:           var(--b3g-blue-500);   /* #1E84C5 — info badge, not button text */
  /* Chrome (top bar / nav) */
  --color-chrome:         var(--b3g-blue-700);
  --color-on-chrome:      var(--b3g-white);
  /* Card-design domain status badge — EPIC-22.7 capstone WCAG pair
   * Status badges render design lifecycle state (DRAFT/PENDING_APPROVAL/APPROVED/RETIRED).
   * Foreground: --color-design-status-text on background: --color-design-status-bg.
   * #16212B on #E8ECF0 = WCAG AA ≈ 9.18:1 (normal text) ✓
   * MUTATION-GUARD: set --color-design-status-text to #888888 → ≈ 4.24:1 < 4.5 → wcagContrastGate RED */
  --color-design-status-text: var(--b3g-ink-900);  /* #16212B */
  --color-design-status-bg:   #E8ECF0;              /* light neutral — explicit hex, not a primitive */

  /* Story 26.7 — ops health-board severity chips (jobs/outbox/platform areas).
   * Foreground reuses --color-text (already = --b3g-ink-900 in this theme, identical to
   * --color-design-status-text) — every severity pair below is checked in
   * infra/scripts/wcag-contrast-gate.py check_theme() against --color-text on each bg.
   * #16212B on #E3F1DB/#FCEBD5/#F8D7D2/#EDEFF2 = WCAG AA >= 12:1 (normal text) ✓
   * MUTATION-GUARD: set any --color-health-*-bg to a near-ink value → ratio < 4.5 → wcagContrastGate RED */
  --color-health-ok-bg:          #E3F1DB;
  --color-health-warn-bg:        #FCEBD5;
  --color-health-critical-bg:    #F8D7D2;
  --color-health-unavailable-bg: #EDEFF2;

  /* Spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-6: 2.5rem;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-pill: 999px;

  /* Typography scale (rem × --font-scale) */
  --font-scale: 1;
  --font-xs:  calc(.75rem   * var(--font-scale));
  --font-sm:  calc(.875rem  * var(--font-scale));
  --font-md:  calc(1rem     * var(--font-scale));
  --font-lg:  calc(1.25rem  * var(--font-scale));
  --font-xl:  calc(1.75rem  * var(--font-scale));
  --font-2xl: calc(2.5rem   * var(--font-scale));
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-ar: "Noto Kufi Arabic", "Noto Sans Arabic", Arial, sans-serif;

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--color-primary);
}

/* ── Dark theme ──────────────────────────────────────────────────────────────
 * Redefines semantic layer only — primitives untouched.
 * High-contrast theme must also pass WCAG AA (20.12 capstone).
 */
[data-theme="dark"] {
  --color-bg:             #0F1923;
  --color-surface:        #1C2B3A;
  --color-text:           #E8EEF4;
  --color-primary:        var(--b3g-blue-300);
  --color-primary-strong: var(--b3g-blue-500);
  --color-on-primary:     #16212B;
  --color-chrome:         #0D1620;
  --color-on-chrome:      #E8EEF4;
  --color-success:        #82C45A;
  --color-warning:        #F5B041;
  --color-danger:         #E74C3C;
  --color-info:           var(--b3g-blue-300);
  /* Card-design domain status badge — dark theme override
   * #E8EEF4 on #1E2D3E = WCAG AA ≈ 9.51:1 ✓ */
  --color-design-status-text: #E8EEF4;
  --color-design-status-bg:   #1E2D3E;
  /* Story 26.7 — ops health-board severity chips, dark theme override.
   * #E8EEF4 (--color-text) on these dark muted tints = WCAG AA >= 10:1 ✓ */
  --color-health-ok-bg:          #1E3A24;
  --color-health-warn-bg:        #3A2E12;
  --color-health-critical-bg:    #3A1620;
  --color-health-unavailable-bg: #232E3A;
}

/* ── High-contrast theme ─────────────────────────────────────────────────────
 * Semantic override only; targets ≥7:1 contrast ratio (WCAG AAA / RGAA).
 */
[data-theme="high-contrast"] {
  --color-bg:             #000000;
  --color-surface:        #000000;
  --color-text:           #FFFFFF;
  --color-primary:        #FFD600;
  --color-primary-strong: #FFC200;
  --color-on-primary:     #000000;
  --color-chrome:         #1A1A1A;
  --color-on-chrome:      #FFFFFF;
  --color-secondary:      #00E676;
  --color-accent:         #FF6D00;
  --color-success:        #00E676;
  --color-warning:        #FFD600;
  --color-danger:         #FF1744;
  --color-info:           #40C4FF;
  /* Card-design domain status badge — high-contrast override
   * #FFFFFF on #000000 = WCAG AAA 21:1 ✓ */
  --color-design-status-text: #FFFFFF;
  --color-design-status-bg:   #000000;
  /* Story 26.7 — ops health-board severity chips, high-contrast override.
   * #FFFFFF (--color-text) on near-black tints = WCAG AAA >= 17:1 ✓ */
  --color-health-ok-bg:          #002200;
  --color-health-warn-bg:        #221900;
  --color-health-critical-bg:    #220000;
  --color-health-unavailable-bg: #1A1A1A;
}

/* ── Text-size preference (WCAG 1.4.4 ≥200% resize) ─────────────────────────
 * Sets --font-scale; the type scale tokens multiply by it automatically.
 * Supports sm/md(default)/lg/xl.
 */
html[data-text-size="sm"] { --font-scale: .875; }
html[data-text-size="md"] { --font-scale: 1;    }
html[data-text-size="lg"] { --font-scale: 1.25; }
html[data-text-size="xl"] { --font-scale: 1.5;  }

/* ── RTL logical properties ──────────────────────────────────────────────────
 * No separate RTL stylesheet — logical props (margin-inline, padding-inline,
 * text-align: start) make the same token set serve LTR + RTL.
 * dir="rtl" is server-resolved in the layout template for the AR locale.
 */
[dir="rtl"] {
  --font-family: var(--font-family-ar), var(--font-family);
}

/* ════════════════════════════════════════════════════════════════════════════
 * EPIC-38 — modernized design-system tokens (operator-approved
 * direction, ported from docs/handoff/_epic38-design-reference.html).
 *
 * A NEW component-facing token layer used by the modernized app-shell + flagship
 * screens (38.1) and rolled out app-wide in 38.2–38.5. Kept ALONGSIDE the legacy
 * --color-* / --space-* tokens so unmodified screens (and the WCAG-contrast gate
 * pairs) are untouched. Values alias the tier-1 primitives (--p-*).
 * ════════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="b3g"] {
  /* accent ramp (per-tenant themes remap these below) */
  --brand-050: var(--p-brand-050); --brand-300: var(--p-brand-300);
  --brand-500: var(--p-brand-500); --brand-600: var(--p-brand-600); --brand-700: var(--p-brand-700);
  /* status (separate from accent) */
  --ok: var(--p-ok); --ok-bg: var(--p-ok-bg); --warn: var(--p-warn); --warn-bg: var(--p-warn-bg);
  --crit: var(--p-crit); --crit-bg: var(--p-crit-bg);
  /* cool neutrals */
  --ink: var(--p-ink); --ink-2: var(--p-ink-2); --ink-3: var(--p-ink-3);
  --line: var(--p-line); --line-2: var(--p-line-2);
  --surface: var(--p-surface); --surface-2: var(--p-surface-2); --surface-3: var(--p-surface-3);
  --chrome: var(--p-chrome);
  /* elevation */
  --shadow-sm: var(--p-shadow-sm); --shadow-md: var(--p-shadow-md); --shadow-lg: var(--p-shadow-lg);
  /* radii, spacing, type scale, motion, layout */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --fs-xs: .72rem; --fs-sm: .82rem; --fs-md: .92rem; --fs-lg: 1.05rem; --fs-xl: 1.35rem; --fs-2xl: 1.75rem;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sidebar-w: 248px; --dur: .18s;
  /* sidebar text on the dark --chrome surface (light grays; work in both themes) */
  --on-chrome: #DCE6F0; --on-chrome-nav: #B9C7D6; --on-chrome-muted: #8DA2B7; --on-chrome-label: #6E8399;
  --on-accent: #FFFFFF;                 /* text/icon on a filled --brand-* accent */
  --scrim: rgba(8,14,20,.5);            /* mobile drawer overlay */
  --chrome-hair: rgba(255,255,255,.07); /* hairline dividers on the dark sidebar */
  --chrome-hover: rgba(255,255,255,.06);/* nav hover on the dark sidebar */
  --chrome-outline: rgba(255,255,255,.12);
  /* modern self-hosted type lifts the whole app (contrast-safe cascade) */
  --font-family: var(--sans);
}

/* dark — OS preference (unless an explicit light theme is chosen) AND the toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="b3g"]):not([data-theme="high-contrast"]) {
    --ink: var(--p-ink-d); --ink-2: var(--p-ink-2-d); --ink-3: var(--p-ink-3-d);
    --line: var(--p-line-d); --line-2: var(--p-line-2-d);
    --surface: var(--p-surface-d); --surface-2: var(--p-surface-2-d); --surface-3: var(--p-surface-3-d);
    --chrome: var(--p-chrome-d); --brand-050: var(--p-brand-050-d);
    --ok-bg: var(--p-ok-bg-d); --warn-bg: var(--p-warn-bg-d); --crit-bg: var(--p-crit-bg-d);
    --shadow-sm: var(--p-shadow-sm-d); --shadow-md: var(--p-shadow-md-d); --shadow-lg: var(--p-shadow-lg-d);
  }
}
[data-theme="dark"] {
  --ink: var(--p-ink-d); --ink-2: var(--p-ink-2-d); --ink-3: var(--p-ink-3-d);
  --line: var(--p-line-d); --line-2: var(--p-line-2-d);
  --surface: var(--p-surface-d); --surface-2: var(--p-surface-2-d); --surface-3: var(--p-surface-3-d);
  --chrome: var(--p-chrome-d); --brand-050: var(--p-brand-050-d);
  --ok-bg: var(--p-ok-bg-d); --warn-bg: var(--p-warn-bg-d); --crit-bg: var(--p-crit-bg-d);
  --shadow-sm: var(--p-shadow-sm-d); --shadow-md: var(--p-shadow-md-d); --shadow-lg: var(--p-shadow-lg-d);
}

/* 38.1-fix: per-tenant accent themes are NO LONGER here. The shared root
 * stays clean = B3G default. Each tenant's --brand-* overrides live in a self-hosted
 * per-tenant stylesheet (static/css/tenant/<slug>/theme.css), linked by the app-shell
 * only when the authenticated tenant is associated to a non-default theme. No
 * attribute-driven per-tenant root override lives in the shared CSS anymore. */