/*
 * ORAGO — extended tokens / backward-compatibility alias layer
 *
 * The canonical design system lives in `colors_and_type.css` and was
 * authored by the design team (gold-amber accent, Barlow + IBM Plex Mono,
 * 4-step spacing, semantic surfaces, status, process-category palette).
 *
 * Existing project CSS / Razor files use older token names (`--orago-*`,
 * `--state-*`, `--viz-*`, `--fs-display`, etc.). Rather than churn through
 * 600+ usages in one pass, this file aliases every legacy token to the
 * canonical one, so:
 *
 *   1. `colors_and_type.css` is the single source of truth.
 *   2. New code should reach for the canonical names (`--amber-500`,
 *      `--fg-1`, `--surface-raised`, `--r-md`, ...).
 *   3. Legacy names keep resolving — nothing breaks during migration.
 *   4. As pages are touched, prefer the canonical name and let aliases
 *      die naturally.
 *
 * Bootstrap 5 / Syncfusion Bootstrap5 theme variables are remapped at the
 * bottom so Syncfusion components stay token-aligned in light + dark.
 */

:root {
    /* ────────────────────────────────────────────────────────────
     * Surfaces
     * ──────────────────────────────────────────────────────────── */
    --orago-bg:            var(--surface-body);
    --orago-surface:       var(--surface-raised);
    --orago-surface-alt:   var(--surface-tertiary);

    /* ────────────────────────────────────────────────────────────
     * Text
     * ──────────────────────────────────────────────────────────── */
    --orago-text:          var(--fg-1);
    --orago-text-muted:    var(--fg-3);
    --orago-text-soft:     var(--fg-2);

    /* ────────────────────────────────────────────────────────────
     * Borders
     * ──────────────────────────────────────────────────────────── */
    --orago-border:         var(--border);
    --orago-border-strong:  var(--border-strong);

    /* ────────────────────────────────────────────────────────────
     * Brand / primary — now amber gold (was Bloomberg blue)
     * ──────────────────────────────────────────────────────────── */
    --orago-primary:        var(--amber-500);
    --orago-primary-hover:  var(--amber-600);
    --orago-primary-soft:   var(--amber-tint-10);

    --orago-danger:         var(--danger);
    --orago-warn:           var(--warn);
    --orago-ok:             var(--success);

    /* ────────────────────────────────────────────────────────────
     * Semantic state pairs (chips, ribbons, badges, traffic lights)
     * Maps the old TrafficLight palette onto the new status palette,
     * with the locked/sim/terminal slots redirected to data-categorical
     * tokens that already exist in the design system.
     * ──────────────────────────────────────────────────────────── */
    --state-ok-bg:        var(--success-bg);
    --state-ok-fg:        var(--success);

    --state-warn-bg:      var(--warn-bg);
    --state-warn-fg:      var(--warn);

    --state-danger-bg:    var(--danger-bg);
    --state-danger-fg:    var(--danger);

    --state-locked-bg:    var(--info-bg);
    --state-locked-fg:    var(--info);

    --state-sim-bg:       var(--proc-assembly-bg);   /* purple */
    --state-sim-fg:       var(--proc-assembly);

    --state-terminal-bg:  var(--surface-tertiary);
    --state-terminal-fg:  var(--fg-2);

    /* ────────────────────────────────────────────────────────────
     * Data-viz palette — chart series. Maps to the canonical
     * process-category colours so charts and grids agree.
     * ──────────────────────────────────────────────────────────── */
    --viz-1: var(--proc-joining);     /* blue */
    --viz-2: var(--proc-machining);   /* green */
    --viz-3: var(--proc-forming);     /* orange */
    --viz-4: var(--proc-assembly);    /* purple */
    --viz-5: #0a8a8f;                 /* teal — kept for 6-series compat */
    --viz-6: var(--proc-casting);     /* dark red */

    /* ────────────────────────────────────────────────────────────
     * Radius / shadow
     * ──────────────────────────────────────────────────────────── */
    --radius:      var(--r-xs);
    --radius-lg:   var(--r-lg);
    --shadow-1:    var(--shadow-card);

    /* ────────────────────────────────────────────────────────────
     * Type-scale legacy tokens
     * ──────────────────────────────────────────────────────────── */
    --fs-display: var(--fs-24);
    --fs-h1:      var(--fs-18);
    --fs-body:    var(--fs-12);
    --fs-small:   var(--fs-11);
    --fs-micro:   var(--fs-10);

    /* Legacy font-family aliases (used by .ds-mono and Razor inline refs). */
    --ds-font-sans: var(--font-sans);
    --ds-font-mono: var(--font-mono);

    /* ────────────────────────────────────────────────────────────
     * Layout metrics — old names kept; new design system already
     * defines --topnav-h with the same value.
     * ──────────────────────────────────────────────────────────── */
    --topbar-h:    var(--topnav-h);
}

/* Dark-mode aliases that need explicit values (anything tints opacity-tweak). */
[data-theme="dark"] {
    --amber-tint-10: rgba(212,136,26,.14);
    --amber-tint-18: rgba(212,136,26,.22);

    /* Bootstrap 5 CSS variables — Syncfusion's bootstrap5 theme inherits
       most of these. Remap so Syncfusion internals that don't hit our
       token selectors still render against the new palette. */
    --bs-body-bg:        var(--surface-body);
    --bs-body-color:     var(--fg-1);
    --bs-secondary-bg:   var(--surface-tertiary);
    --bs-tertiary-bg:    var(--surface-tertiary);
    --bs-border-color:   var(--border);
    --bs-secondary-color: var(--fg-2);
    --bs-heading-color:  var(--fg-1);
    --bs-emphasis-color: var(--fg-1);
    --bs-link-color:     var(--amber-500);
    --bs-link-hover-color: var(--amber-600);
}

/* Light-mode equivalent — Syncfusion's defaults are already light-leaning,
   but tying its CSS variables to our tokens keeps brand-accent state
   (focus rings, current-page pills) consistent. */
:root {
    --bs-link-color:       var(--amber-500);
    --bs-link-hover-color: var(--amber-600);
}