/* TREJJ Design System v1.7.0 — shared semantic tokens and accessible primitives. */
:root {
    color-scheme: light dark;
    --trejj-violet-600: #7724c9;
    --trejj-violet-400: #ad69f4;
    --trejj-pink-500: #c638dc;
    --trejj-danger: #a72d45;
    --trejj-warning: #8a5a00;
    --trejj-success: #126746;
    --trejj-bg: #f7f5fb;
    --trejj-surface: #ffffff;
    --trejj-surface-raised: #f0eaf5;
    --trejj-text: #18131f;
    --trejj-muted: #62586c;
    --trejj-line: #d7cde0;
    --trejj-focus: #7724c9;
    --trejj-primary: #7724c9;
    --trejj-primary-end: #c638dc;
    --trejj-on-primary: #ffffff;
    --trejj-field: #ffffff;
    --trejj-hover: #f0eaf5;
    --trejj-success-surface: #e5f6ee;
    --trejj-success-line: #2b805d;
    --trejj-warning-surface: #fff3cf;
    --trejj-warning-line: #a66a00;
    --trejj-danger-surface: #fde8ec;
    --trejj-danger-line: #b34b5f;
    --trejj-code-surface: #eee7f3;
    --trejj-scrim: rgb(24 19 31 / 55%);
    --trejj-hero-glow: #ead9f8;
    --bg: var(--trejj-bg);
    --ink: var(--trejj-bg);
    --side: var(--trejj-surface-raised);
    --panel: var(--trejj-surface);
    --card: var(--trejj-surface);
    --text: var(--trejj-text);
    --white: var(--trejj-text);
    --muted: var(--trejj-muted);
    --line: var(--trejj-line);
    --accent: var(--trejj-violet-600);
    --violet: var(--trejj-violet-600);
    --pink: var(--trejj-pink-500);
    --good: var(--trejj-success);
    --primary: var(--trejj-primary);
    --primary-end: var(--trejj-primary-end);
    --on-primary: var(--trejj-on-primary);
    --field: var(--trejj-field);
    --hover: var(--trejj-hover);
    --success-surface: var(--trejj-success-surface);
    --success-line: var(--trejj-success-line);
    --warning-surface: var(--trejj-warning-surface);
    --warning-line: var(--trejj-warning-line);
    --danger-surface: var(--trejj-danger-surface);
    --danger-line: var(--trejj-danger-line);
    --code-surface: var(--trejj-code-surface);
    --hero-glow: var(--trejj-hero-glow);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --trejj-bg: #090612;
    --trejj-surface: #171020;
    --trejj-surface-raised: #100b19;
    --trejj-text: #fbf9ff;
    --trejj-muted: #b8afc2;
    --trejj-line: #3b2c48;
    --trejj-focus: #f2b6ff;
    --trejj-violet-600: #a557f1;
    --trejj-violet-400: #d4a5ff;
    --trejj-success: #72d8ae;
    --trejj-danger: #ff8da3;
    --trejj-warning: #ffd071;
    --trejj-primary: #7724c9;
    --trejj-primary-end: #9b238f;
    --trejj-field: #0d0914;
    --trejj-hover: #271c34;
    --trejj-success-surface: #173626;
    --trejj-success-line: #347354;
    --trejj-warning-surface: #382b12;
    --trejj-warning-line: #a66a00;
    --trejj-danger-surface: #3a1720;
    --trejj-danger-line: #8d354b;
    --trejj-code-surface: #150d19;
    --trejj-scrim: rgb(0 0 0 / 53%);
    --trejj-hero-glow: #35135f;
}

:root[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --trejj-bg: #090612;
        --trejj-surface: #171020;
        --trejj-surface-raised: #100b19;
        --trejj-text: #fbf9ff;
        --trejj-muted: #b8afc2;
        --trejj-line: #3b2c48;
        --trejj-focus: #f2b6ff;
        --trejj-violet-600: #a557f1;
        --trejj-violet-400: #d4a5ff;
        --trejj-success: #72d8ae;
        --trejj-danger: #ff8da3;
        --trejj-warning: #ffd071;
        --trejj-primary: #7724c9;
        --trejj-primary-end: #9b238f;
        --trejj-field: #0d0914;
        --trejj-hover: #271c34;
        --trejj-success-surface: #173626;
        --trejj-success-line: #347354;
        --trejj-warning-surface: #382b12;
        --trejj-warning-line: #a66a00;
        --trejj-danger-surface: #3a1720;
        --trejj-danger-line: #8d354b;
        --trejj-code-surface: #150d19;
        --trejj-scrim: rgb(0 0 0 / 53%);
        --trejj-hero-glow: #35135f;
    }
}

html { background: var(--trejj-bg); }
body { background-color: var(--trejj-bg); color: var(--trejj-text); }
:focus-visible { outline: 3px solid var(--trejj-focus); outline-offset: 3px; }
button, input:not([type="hidden"]), select, textarea, .button { min-block-size: 2.75rem; }
.trejj-theme-control label { cursor: pointer; }
.trejj-theme-control { display: inline-flex; align-items: center; gap: .45rem; color: var(--trejj-muted); font-size: .82rem; }
.trejj-theme-control select { width: auto; min-width: 6.5rem; margin: 0; padding: .42rem .55rem; border: 1px solid var(--trejj-line); border-radius: .45rem; background: var(--trejj-surface); color: var(--trejj-text); font: inherit; }
.trejj-bandwidth-control { display: grid; grid-template-columns: auto minmax(7rem, 1fr) auto; align-items: center; gap: .45rem; margin-block: .5rem; color: var(--trejj-muted); font-size: .82rem; }
.trejj-bandwidth-control label { margin: 0; cursor: pointer; }
.trejj-bandwidth-control select, .trejj-bandwidth-control button { width: auto; min-width: 0; margin: 0; padding: .42rem .55rem; border: 1px solid var(--trejj-line); border-radius: .45rem; background: var(--trejj-surface); color: var(--trejj-text); font: inherit; }
:root[data-bandwidth="low"] .bandwidth-rich { display: none !important; }
.trejj-status-badge { display: inline-flex; align-items: center; max-width: 100%; padding: .2rem .55rem; border: 1px solid var(--trejj-line); border-radius: 999px; background: var(--trejj-surface-raised); color: var(--trejj-text); font-size: .78rem; font-weight: 700; overflow-wrap: anywhere; }
.trejj-status-badge[data-tone="success"] { border-color: var(--trejj-success-line); background: var(--trejj-success-surface); color: var(--trejj-success); }
.trejj-status-badge[data-tone="warning"] { border-color: var(--trejj-warning-line); background: var(--trejj-warning-surface); color: var(--trejj-warning); }
.trejj-status-badge[data-tone="danger"] { border-color: var(--trejj-danger-line); background: var(--trejj-danger-surface); color: var(--trejj-danger); }
.trejj-status-badge[data-tone="info"] { border-color: var(--trejj-focus); background: var(--trejj-hover); color: var(--trejj-text); }
.trejj-feedback { padding: .75rem .9rem; border: 1px solid var(--trejj-line); border-radius: .6rem; background: var(--trejj-surface); color: var(--trejj-text); }
.trejj-feedback[data-type="success"] { border-color: var(--trejj-success-line); background: var(--trejj-success-surface); }
.trejj-feedback[data-type="warning"] { border-color: var(--trejj-warning-line); background: var(--trejj-warning-surface); }
.trejj-feedback[data-type="error"] { border-color: var(--trejj-danger-line); background: var(--trejj-danger-surface); }
.trejj-empty-state { padding: 1rem; color: var(--trejj-muted); text-align: center; overflow-wrap: anywhere; }
.trejj-workflow-state { padding: 1rem; border: 1px solid var(--trejj-line); border-radius: .75rem; background: var(--trejj-surface); overflow-wrap: anywhere; }
.trejj-workflow-state h1 { margin-block: 0 .6rem; }
.trejj-workflow-state-body > :last-child { margin-bottom: 0; }
.trejj-workflow-state[data-state="success"] { border-color: var(--trejj-success-line); background: var(--trejj-success-surface); }
.trejj-workflow-state[data-state="error"] { border-color: var(--trejj-danger-line); background: var(--trejj-danger-surface); }
.trejj-workflow-state[data-state="loading"] { border-color: var(--trejj-warning-line); background: var(--trejj-warning-surface); }
.trejj-workflow-state[data-state="empty"] { color: var(--trejj-muted); }

.trejj-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

form[aria-busy="true"] { cursor: progress; }

form[aria-busy="true"] [data-trejj-submitting] { cursor: progress; opacity: .72; }
.trejj-brand-logo { display: inline-grid; align-items: center; }
.trejj-brand-logo .trejj-logo { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; }
.trejj-brand-logo .trejj-logo-dark { display: none; }
img[src="/images/trejj-logo.png"] { content: url("/images/trejj-logo-light-v2.png"); }
:root[data-theme="dark"] .trejj-brand-logo .trejj-logo-light { display: none; }
:root[data-theme="dark"] .trejj-brand-logo .trejj-logo-dark { display: block; }
:root[data-theme="dark"] img[src="/images/trejj-logo.png"] { content: url("/images/trejj-logo-dark-v2.png"); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .trejj-brand-logo .trejj-logo-light { display: none; }
    :root:not([data-theme]) .trejj-brand-logo .trejj-logo-dark { display: block; }
    :root:not([data-theme]) img[src="/images/trejj-logo.png"] { content: url("/images/trejj-logo-dark-v2.png"); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media (forced-colors: active) {
    :focus-visible { outline: 3px solid Highlight; }
    button, input, select, textarea, .button { border: 1px solid ButtonText; }
}
@media (max-width: 26rem) { .trejj-bandwidth-control { grid-template-columns: 1fr; align-items: stretch; } }