/* Astra-Tyrian — a dark operations-console theme.
 *
 * Deep tyrian violet canvas, cyan as the "measured signal" accent, coral-rose
 * for faults, monospace throughout, uppercase tracked labels and thin panels
 * with corner brackets. Built for telemetry screens: Query Trace, End-user
 * usage, MCP diagnostics, the Semantic Layer graph and the dashboards.
 *
 * Applies only under :root[data-theme="astra-tyrian"], set server-side in
 * _brand.html from the user's Preferences so it lands before first paint.
 *
 * Two jobs here, in order:
 *   1. Redefine the semantic tokens from tokens.css, AND the eight legacy
 *      Fusion5 brand vars. The legacy ones matter because ~1,500 existing
 *      var() calls still point at them, and --light-grey: #F5F5F5 in a dark
 *      UI is a white slab.
 *   2. Structural rules for the character the tokens cannot carry on their
 *      own: type, panel chrome, form controls, scrollbars.
 */

:root[data-theme="astra-tyrian"] {
    /* Surfaces */
    --surface:         #150C26;
    --surface-raised:  #1D1233;
    --surface-sunken:  #0E0819;
    --surface-base:    #0A0512;
    --surface-inverse: #E4DAF5;

    /* Text */
    --text:            #E4DAF5;
    --text-muted:      #9C8CBA;
    --text-faint:      #6E5F8C;
    --text-on-accent:  #06121A;   /* dark type on a bright cyan fill */
    --text-inverse:    #0A0512;

    /* Lines */
    --line-faint:      #241640;
    --line:            #33205C;
    --line-strong:     #5B3A94;

    /* Accent: cyan is the measured signal */
    --accent:          #35E0F2;
    --accent-hover:    #6FEAF7;
    --accent-text:     #5CE6F5;
    --accent-soft:     #0E2A33;
    --accent-fill:     rgba(53, 224, 242, .22);
    --brand:           #7C4DBE;
    --brand-soft:      #A993B8;
    --brand-text:      #C9B6E8;   /* brand-coloured type has to invert */
    --text-on-brand:   #E4DAF5;

    /* Status. Fills stay saturated, backgrounds go deep rather than pale. */
    --ok:              #3DD68C;
    --ok-bg:           #0B2A1E;
    --ok-text:         #5FE3A4;
    --warn:            #F5A524;
    --warn-bg:         #2E1F06;
    --warn-text:       #F7BC5C;
    --danger:          #FF4D6D;
    --danger-bg:       #2E0A16;
    --danger-text:     #FF7A92;
    --info:            #35E0F2;
    --info-bg:         #0E2A33;
    --info-text:       #5CE6F5;

    /* Series colours re-stepped for this surface, not an automatic flip of the
     * light set. Same eight hues, darker-surface steps. Validated as a set
     * against --surface #150C26: all eight clear the dark lightness band, the
     * chroma floor, adjacent CVD separation and 3:1 contrast. */
    --series-1:        #3987e5;
    --series-2:        #d95926;
    --series-3:        #199e70;
    --series-4:        #c98500;
    --series-5:        #d55181;
    --series-6:        #008300;
    --series-7:        #9085e9;
    --series-8:        #e66767;
    --series-other:    #9C8CBA;

    /* Chrome */
    --font-ui:         ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    --radius:          4px;
    --radius-sm:       3px;
    --panel-shadow:    0 0 0 1px rgba(124, 77, 190, .16), 0 0 28px rgba(53, 224, 242, .05);
    --panel-glow:      0 0 18px rgba(53, 224, 242, .18);
    --label-transform: uppercase;
    --label-tracking:  .09em;
    --focus-ring:      0 0 0 2px rgba(53, 224, 242, .55);
    --page-canvas:     radial-gradient(120% 90% at 50% 0%, #1A0E31 0%, #0A0512 60%, #06030C 100%);

    /* Legacy Fusion5 brand vars. Still referenced by ~1,500 var() calls in the
     * templates, so a dark theme has to move them or the UI stays half-light. */
    --fusion5-coral:   #35E0F2;
    --coral:           #35E0F2;
    --fusion5-violet:  #1A0E31;
    --violet:          #1A0E31;
    --camille-grey:    #2A1B4A;
    --monarch-bay:     #35E0F2;
    --rose-tea:        #A993B8;
    --jet:             #E4DAF5;
    --white:           #150C26;
    --light-grey:      #0E0819;
    --off-white:       #150C26;
}

/* ── Canvas and type ─────────────────────────────────────────────────────── */

:root[data-theme="astra-tyrian"] body {
    background: var(--page-canvas) fixed;
    color: var(--text);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
}

:root[data-theme="astra-tyrian"] h1,
:root[data-theme="astra-tyrian"] h2,
:root[data-theme="astra-tyrian"] h3,
:root[data-theme="astra-tyrian"] h4,
:root[data-theme="astra-tyrian"] .card-title,
:root[data-theme="astra-tyrian"] .section-title {
    color: var(--text);
    font-weight: 600;
    text-transform: var(--label-transform);
    letter-spacing: var(--label-tracking);
}

/* Small labels get the console treatment; body copy stays readable. */
:root[data-theme="astra-tyrian"] .field-label,
:root[data-theme="astra-tyrian"] .label,
:root[data-theme="astra-tyrian"] .stat-label,
:root[data-theme="astra-tyrian"] th {
    text-transform: var(--label-transform);
    letter-spacing: var(--label-tracking);
    color: var(--text-muted);
    font-size: .74rem;
}

:root[data-theme="astra-tyrian"] .muted,
:root[data-theme="astra-tyrian"] .card-desc,
:root[data-theme="astra-tyrian"] .field-hint,
:root[data-theme="astra-tyrian"] .empty,
:root[data-theme="astra-tyrian"] .empty-state { color: var(--text-muted); }

:root[data-theme="astra-tyrian"] a { color: var(--accent-text); }
:root[data-theme="astra-tyrian"] a:hover { color: var(--accent-hover); }

/* Numerals are the point of a telemetry screen: let them glow a little. */
:root[data-theme="astra-tyrian"] .num,
:root[data-theme="astra-tyrian"] .value,
:root[data-theme="astra-tyrian"] .stat-value,
:root[data-theme="astra-tyrian"] .metric-value {
    color: var(--accent);
    text-shadow: 0 0 14px rgba(53, 224, 242, .28);
    font-variant-numeric: tabular-nums;
}

/* ── Panels ──────────────────────────────────────────────────────────────── */

:root[data-theme="astra-tyrian"] .card,
:root[data-theme="astra-tyrian"] .panel,
:root[data-theme="astra-tyrian"] .modal-content,
:root[data-theme="astra-tyrian"] .section {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--panel-shadow);
    color: var(--text);
}

/* Corner brackets. Drawn on ::before/::after so no markup changes are needed;
 * pointer-events:none keeps them clear of anything interactive underneath. */
:root[data-theme="astra-tyrian"] .card::before,
:root[data-theme="astra-tyrian"] .card::after,
:root[data-theme="astra-tyrian"] .panel::before,
:root[data-theme="astra-tyrian"] .panel::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--line-strong);
    border-style: solid;
    pointer-events: none;
    opacity: .85;
}

:root[data-theme="astra-tyrian"] .card::before,
:root[data-theme="astra-tyrian"] .panel::before {
    top: -1px; left: -1px;
    border-width: 1px 0 0 1px;
    border-top-left-radius: var(--radius);
}

:root[data-theme="astra-tyrian"] .card::after,
:root[data-theme="astra-tyrian"] .panel::after {
    bottom: -1px; right: -1px;
    border-width: 0 1px 1px 0;
    border-bottom-right-radius: var(--radius);
}

:root[data-theme="astra-tyrian"] .card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--panel-shadow), var(--panel-glow);
}

/* ── Page headers ────────────────────────────────────────────────────────── */

/* The migration leaves gradients alone, because collapsing every stop onto one
 * token would flatten them. That means the brand violet-to-teal header survives
 * into the dark theme far too light, so it is restyled here wholesale. Same
 * shape, theme colours. */
:root[data-theme="astra-tyrian"] .header,
:root[data-theme="astra-tyrian"] .topbar,
:root[data-theme="astra-tyrian"] .page-header,
:root[data-theme="astra-tyrian"] .admin-header {
    background: linear-gradient(135deg, #1A0E31 0%, #0E2A33 100%);
    border-bottom: 1px solid var(--line);
    color: var(--text);
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

/* The tab bar is var(--accent) by design, which in the light theme is a coral
 * strip with white labels. Mapping accent to cyan turns that into a glaring
 * full-width slab, and the inactive labels are rgba(255,255,255,.78) — a
 * literal this migration deliberately does not touch — which strands them at
 * roughly 1.6:1 on cyan. A console nav wants the opposite emphasis: dark bar,
 * accent reserved for the active tab.
 */
:root[data-theme="astra-tyrian"] .tab-bar {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
}

:root[data-theme="astra-tyrian"] .tab-btn {
    color: var(--text-muted);
    text-transform: var(--label-transform);
    letter-spacing: var(--label-tracking);
}

:root[data-theme="astra-tyrian"] .tab-btn:hover {
    color: var(--text);
    background: rgba(53, 224, 242, .07);
}

:root[data-theme="astra-tyrian"] .tab-btn.active {
    color: var(--accent);
    background: rgba(53, 224, 242, .10);
    border-bottom-color: var(--accent);
    text-shadow: 0 0 12px rgba(53, 224, 242, .35);
}

/* ── Controls ────────────────────────────────────────────────────────────── */

:root[data-theme="astra-tyrian"] input,
:root[data-theme="astra-tyrian"] select,
:root[data-theme="astra-tyrian"] textarea,
:root[data-theme="astra-tyrian"] .field-input {
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
}

:root[data-theme="astra-tyrian"] input::placeholder,
:root[data-theme="astra-tyrian"] textarea::placeholder { color: var(--text-faint); }

:root[data-theme="astra-tyrian"] input:focus,
:root[data-theme="astra-tyrian"] select:focus,
:root[data-theme="astra-tyrian"] textarea:focus,
:root[data-theme="astra-tyrian"] .field-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* select needs its own dropdown surface or the options render system-light */
:root[data-theme="astra-tyrian"] select option {
    background: var(--surface-raised);
    color: var(--text);
}

:root[data-theme="astra-tyrian"] .btn,
:root[data-theme="astra-tyrian"] button {
    font-family: var(--font-ui);
    letter-spacing: var(--label-tracking);
    border-radius: var(--radius-sm);
}

:root[data-theme="astra-tyrian"] .btn:focus-visible,
:root[data-theme="astra-tyrian"] button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── Tables, code, dividers ──────────────────────────────────────────────── */

:root[data-theme="astra-tyrian"] table { color: var(--text); }
:root[data-theme="astra-tyrian"] th,
:root[data-theme="astra-tyrian"] td { border-color: var(--line-faint); }
:root[data-theme="astra-tyrian"] tbody tr:nth-child(even) { background: var(--surface-sunken); }
:root[data-theme="astra-tyrian"] tbody tr:hover { background: var(--surface-raised); }

:root[data-theme="astra-tyrian"] code,
:root[data-theme="astra-tyrian"] pre {
    background: var(--surface-sunken);
    border: 1px solid var(--line-faint);
    color: var(--accent-text);
    border-radius: var(--radius-sm);
}

:root[data-theme="astra-tyrian"] hr { border-color: var(--line-faint); }

/* ── Scrollbars ──────────────────────────────────────────────────────────── */

:root[data-theme="astra-tyrian"] * { scrollbar-color: var(--line-strong) transparent; }
:root[data-theme="astra-tyrian"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme="astra-tyrian"] ::-webkit-scrollbar-track { background: var(--surface-sunken); }
:root[data-theme="astra-tyrian"] ::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 5px;
    border: 2px solid var(--surface-sunken);
}
:root[data-theme="astra-tyrian"] ::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* ── Media ───────────────────────────────────────────────────────────────── */

/* Screenshots and diagrams are authored on white. Full brightness against a
 * near-black canvas is a flashbang, so take the edge off until hovered. */
:root[data-theme="astra-tyrian"] .help-shot img,
:root[data-theme="astra-tyrian"] img.screenshot {
    filter: brightness(.88) contrast(1.04);
    transition: filter .15s ease;
}
:root[data-theme="astra-tyrian"] .help-shot img:hover,
:root[data-theme="astra-tyrian"] img.screenshot:hover { filter: none; }

@media (prefers-reduced-motion: reduce) {
    :root[data-theme="astra-tyrian"] * { transition: none !important; }
}