/* Astra-Tyrian — an operations-console theme, dark by default with a light mode.
 *
 * 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.
 * Dark is the base block; [data-mode="light"] overrides the tokens only, so
 * every structural rule below reads tokens rather than dark literals.
 *
 * 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:      #8D7DAD;   /* 4.8:1 on every surface; #6E5F8C was 3.3:1 */
    --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:   #FFFFFF;   /* 5.9:1 on --brand; #E4DAF5 was 4.3 */

    /* 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%);
    --header-bg:       linear-gradient(135deg, #1A0E31 0%, #0E2A33 100%);
    --numeral-glow:    0 0 14px rgba(53, 224, 242, .28);
    --tab-hover-bg:    rgba(53, 224, 242, .07);
    --tab-active-bg:   rgba(53, 224, 242, .10);
    --tab-active-glow: 0 0 12px rgba(53, 224, 242, .35);
    --media-filter:    brightness(.88) contrast(1.04);

    /* 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;
}

/* ── Light mode ──────────────────────────────────────────────────────────────
 * Same console character in daylight: lavender paper, tyrian ink, and the
 * cyan signal deepened to teal, because #35E0F2 on a light surface is 1.4:1
 * as text and cannot carry white type as a fill. Every text token clears
 * 4.5:1 on all three surfaces; white on the accent fill is 4.7:1. */
:root[data-theme="astra-tyrian"][data-mode="light"] {
    --surface:         #FBF9FE;
    --surface-raised:  #FFFFFF;
    --surface-sunken:  #F1ECF8;
    --surface-base:    #E9E2F3;
    --surface-inverse: #1D1233;

    --text:            #1D1233;
    --text-muted:      #57487A;
    --text-faint:      #6A5B88;
    --text-on-accent:  #FFFFFF;
    --text-inverse:    #FBF9FE;

    --line-faint:      #ECE5F5;
    --line:            #DCD1EC;
    --line-strong:     #A48BC9;

    --accent:          #0B7F8F;
    --accent-hover:    #096B78;
    --accent-text:     #076270;   /* 4.9:1 even on an active tab's tint */
    --accent-soft:     #E0F6F8;
    --accent-fill:     rgba(11, 127, 143, .18);
    --brand:           #5B2D9A;
    --brand-soft:      #A993B8;
    --brand-text:      #4B2384;
    --text-on-brand:   #FFFFFF;

    --ok:              #17803D;
    --ok-bg:           #E3F5EA;
    --ok-text:         #126B33;
    --warn:            #B45309;
    --warn-bg:         #FEF1DC;
    --warn-text:       #92400E;
    --danger:          #C42D45;
    --danger-bg:       #FCE4E8;
    --danger-text:     #A3233A;
    --info:            #0B7F8F;
    --info-bg:         #E0F6F8;
    --info-text:       #08707E;

    /* The default theme's set, validated against white. */
    --series-1:        #2a78d6;
    --series-2:        #eb6834;
    --series-3:        #1baf7a;
    --series-4:        #eda100;
    --series-5:        #e87ba4;
    --series-6:        #008300;
    --series-7:        #4a3aa7;
    --series-8:        #e34948;
    --series-other:    #6A5B88;

    --panel-shadow:    0 0 0 1px rgba(91, 45, 154, .12), 0 6px 18px rgba(29, 18, 51, .06);
    --panel-glow:      0 0 0 3px rgba(11, 127, 143, .12);
    --focus-ring:      0 0 0 2px rgba(11, 127, 143, .45);
    /* Light panels on a deep backdrop, the default theme's own structure:
     * templates put white page titles straight onto the canvas. */
    --page-canvas:     radial-gradient(120% 90% at 50% 0%, #3A2366 0%, #25164A 55%, #170F33 100%);
    --header-bg:       linear-gradient(135deg, #EFE6FB 0%, #DDF3F6 100%);
    --numeral-glow:    none;
    --tab-hover-bg:    rgba(11, 127, 143, .07);
    --tab-active-bg:   rgba(11, 127, 143, .10);
    --tab-active-glow: none;
    --media-filter:    none;

    --fusion5-coral:   #0B7F8F;
    --coral:           #0B7F8F;
    --fusion5-violet:  #3A2366;   /* backdrop gradient start, and heading type */
    --violet:          #5B2D9A;
    --camille-grey:    #0E4F5C;   /* backdrop gradient end, and chip fills under white */
    --monarch-bay:     #0B7F8F;
    --rose-tea:        #8E76B0;
    --jet:             #1D1233;
    --white:           #FFFFFF;
    --light-grey:      #F1ECF8;
    --off-white:       #FBF9FE;

    /* Preferences' page-local names (defined nowhere else). */
    --bg:              var(--surface-base);
    --card:            var(--surface);
    --border:          var(--line);
    --muted:           var(--text-muted);
}

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

/* The console canvas is painted over every page in dark mode only. In light
 * mode each template keeps its own page background, as in the default theme:
 * most are the deep violet gradient behind light panels, Preferences is pale. */
:root[data-theme="astra-tyrian"]:not([data-mode="light"]) body { background: var(--page-canvas) fixed; }
:root[data-theme="astra-tyrian"] body {
    color: var(--text);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
}

/* Heading, label and link COLOURS are zero-specificity defaults (:where), so a
 * colour a template chose on purpose, such as white on a violet header bar,
 * still wins. Only the console typography is asserted. */
/* Dark only: in light mode a heading inherits, as it does in the default
 * theme, so one sitting on a violet bar keeps the bar's white. */
:where(:root[data-theme="astra-tyrian"]:not([data-mode="light"]) :is(h1, h2, h3, h4, .card-title, .section-title)) { color: var(--text); }
: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 {
    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);
    font-size: .74rem;
}
:where(:root[data-theme="astra-tyrian"] :is(.field-label, .label, .stat-label, th)) { color: var(--text-muted); }

: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); }

:where(:root[data-theme="astra-tyrian"] a) { color: var(--accent-text); }
:where(: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);
    text-shadow: var(--numeral-glow);
    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,
:root[data-theme="astra-tyrian"] body > header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--line);
    color: var(--text);
}
/* The admin pages' <header> bars colour their type with --text-on-accent, which
 * is white in the default theme and dark here (it is type for a cyan fill). */
:root[data-theme="astra-tyrian"] body > header a { color: var(--accent-text); }
:root[data-theme="astra-tyrian"] body > header h1 { color: var(--text); }
/* An inline style sets this pill's colour, so only !important can move it. */
:root[data-theme="astra-tyrian"] body > header .pill {
    color: var(--accent-text) !important;
    background: var(--accent-soft);
    border-color: var(--line) !important;
}
/* In light mode the restyled headers are pale, so their white links follow. */
:root[data-theme="astra-tyrian"][data-mode="light"] :is(.header, .topbar, .page-header, .admin-header) a { color: var(--accent-text); }
:root[data-theme="astra-tyrian"][data-mode="light"] .expert-btn.quick-test .name { color: var(--ok-text); }
/* Two template pairings that only hold where accent and brand type are both
 * white: type on the bright --info fill, and on the --brand fill. */
:root[data-theme="astra-tyrian"] .copy-tpl-btn { color: var(--text-on-accent); }
:root[data-theme="astra-tyrian"] .seg button.active { color: var(--text-on-brand); }
:root[data-theme="astra-tyrian"] .mainnav-item { color: var(--text-muted); }
:root[data-theme="astra-tyrian"] .mainnav-item:hover,
:root[data-theme="astra-tyrian"] .mainnav-item.active { 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,
:root[data-theme="astra-tyrian"] .tabs {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
}

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

:root[data-theme="astra-tyrian"] .tab-btn:hover,
:root[data-theme="astra-tyrian"] .tabs button:hover {
    color: var(--text);
    background: var(--tab-hover-bg);
}

:root[data-theme="astra-tyrian"] .tabs button.active,
:root[data-theme="astra-tyrian"] .tab-btn.active {
    color: var(--accent-text);
    background: var(--tab-active-bg);
    border-bottom-color: var(--accent);
    text-shadow: var(--tab-active-glow);
}

/* ── 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: var(--media-filter);
    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; }
}