/*
 * COMMAND appearance system — semantic design tokens (Phase 2).
 *
 * Light is the authoritative default (:root). Dark is opt-in via <html data-theme="dark">.
 * Tokens are derived from COMMAND's existing palette (neutral gray scale + MAG brand red #e11d2e
 * + semantic blue/green/amber) so the themed shell stays native to the current brand — the brand
 * red is preserved in both modes, reserved for priority/alert/primary-action meaning.
 *
 * Consume these variables instead of hard-coding hex values. Surfaces not yet migrated to tokens
 * will not respond to the theme; that migration is tracked as remaining Phase 2 work.
 */

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

    /* Canvas & surfaces */
    --canvas: #F5F6F8;              /* Owner-approved light steel surrounding the transparent MAG logo. */
    --surface: #ffffff;            /* card / content surface */
    --surface-elevated: #ffffff;   /* dialogs, popovers */
    --surface-sunken: #EEF1F4;     /* wells, table headers */
    --nav-surface: #EEF1F4;
    --nav-text: #253342;
    --nav-text-muted: #526170;
    --nav-selected: #D6DCE2;

    /* Text */
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #596575;
    --text-on-accent: #ffffff;

    /* Borders & lines */
    --border-subtle: #e5e7eb;
    --border-strong: #d1d5db;

    /* Interactive */
    --interactive-hover: #f3f4f6;
    --interactive-selected: #eef2ff;
    --focus-ring: #2563eb;
    --link: #006bb7;               /* COMMAND link blue */
    --link-hover: #00518c;

    /* Brand & status (semantic, not decorative) */
    --accent: #c8102e;             /* MAG crimson — primary action and restrained brand accents */
    --accent-hover: #a90d27;
    --status-success: #15803d;     /* WCAG AA: 5.0:1 as text on white (was #16a34a = 3.3:1) */
    --status-success-surface: #f0fdf4;
    --status-warning: #475569;
    --status-warning-surface: #EEF1F4;
    --status-danger: #e11d2e;
    --status-danger-surface: #fef2f2;
    --status-info: #2563eb;
    --status-info-surface: #eff6ff;

    /* Chart, overlay, skeleton */
    --chart-grid: #e5e7eb;
    --chart-label: #6b7280;
    --overlay: rgba(17, 24, 39, 0.45);
    --skeleton: #eef1f5;

    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
    --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.10);

    /* ---- Form vocabulary (see the block comment above the dark values) ---- */
    --form-bg: var(--surface);
    --card-bg: var(--surface);
    --input-bg: var(--surface);
    --input-disabled-bg: #f3f4f6;
    --border-light: #e5e7eb;
    --border-default: #d1d5db;
    --border-dark: #9ca3af;
    --text-tertiary: #9ca3af;
    --text-disabled: #9ca3af;
    --surface-raised: var(--surface-elevated);
    --surface-hover: var(--interactive-hover);
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #dbeafe;
    --secondary: #e5e7eb;
    --secondary-dark: #d1d5db;
    --success: #059669;
    --danger: #dc2626;
    --danger-dark: #b91c1c;
    --danger-light: #fee2e2;
    --danger-text: #991b1b;
}

/* UAT-003 (#709): dark is a SCREEN theme. In print these tokens do not apply, so every token consumer prints
   with the light palette above (ink on white) - no copied token list to drift. The selector stays at column 0. */
@media screen {
:root[data-theme="dark"] {
    color-scheme: dark;

    --canvas: #0e1320;             /* deep navy-charcoal — premium, calm, not black */
    --surface: #171e2c;
    --surface-elevated: #1f2838;
    --surface-sunken: #121826;
    --nav-surface: #0a0e18;        /* nav stays darkest for hierarchy */
    --nav-text: #e5e7eb;
    --nav-text-muted: #8b95a7;
    --nav-selected: #1c2740;

    --text-primary: #f3f4f6;
    --text-secondary: #cbd2dc;
    --text-muted: #94a0b0;
    --text-on-accent: #ffffff;

    --border-subtle: #29323f;
    --border-strong: #3a4553;

    --interactive-hover: #1e2736;
    --interactive-selected: #23304d;
    --focus-ring: #5b8bf0;         /* brighter focus for dark contrast */
    --link: #5cb3f0;               /* lifted link blue for dark contrast */
    --link-hover: #86c8f7;

    --accent: #f04d5f;             /* slightly lifted red so it stays vivid on dark */
    --accent-hover: #ff6575;
    --status-success: #34d17f;
    --status-success-surface: #10241a;
    --status-warning: #cbd5e1;
    --status-warning-surface: #253142;
    --status-danger: #f04d5f;
    --status-danger-surface: #2a1216;
    --status-info: #5b8bf0;
    --status-info-surface: #121d30;

    --chart-grid: #29323f;
    --chart-label: #94a0b0;
    --overlay: rgba(0, 0, 0, 0.6);
    --skeleton: #1c2534;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);

    /*
     * FORM VOCABULARY — the second token language, now answered in both themes.
     *
     * form-design-system.css governs the entity forms and speaks an older vocabulary — --card-bg,
     * --input-bg, --border-default, --primary, --danger and the rest. Those names were never defined
     * anywhere in wwwroot. Every one of the 51 usages carries a literal light-mode fallback, so nothing
     * ever LOOKED broken in light mode and the gap survived unnoticed; in dark mode each fallback kept
     * returning its light literal, so a dark shell rendered white cards, white inputs and light borders
     * on the entity forms. The theme control worked. The forms simply were not listening.
     *
     * Defined here, in the file that already owns appearance, rather than migrated form by form. Ten
     * forms patched individually is ten places to keep in sync and the same defect waiting for the
     * eleventh. The light values above are the literal fallbacks the forms were already resolving to,
     * so light mode is unchanged by construction, with one deliberate exception recorded below.
     *
     * THE ONE LIGHT-MODE CHANGE. --primary carried two different fallbacks in the same file: #2563eb
     * almost everywhere, and #0ea5e9 on four command-bar rules (search focus, filter hover, active
     * filter background and border). A variable cannot hold two values, so the four command-bar rules
     * now resolve to #2563eb along with everything else. That is a visible change on those four rules
     * and it is the point: they were a divergence, not a decision.
     */
    --form-bg: var(--surface);
    --card-bg: var(--surface);
    --input-bg: var(--surface-sunken);   /* inputs recede on dark rather than glowing white */
    --input-disabled-bg: #1a2130;
    --border-light: var(--border-subtle);
    --border-default: var(--border-strong);
    --border-dark: #4b5768;
    --text-tertiary: var(--text-muted);
    --text-disabled: #6b7787;
    --surface-raised: var(--surface-elevated);
    --surface-hover: var(--interactive-hover);
    --primary: #5b8bf0;                  /* lifted for contrast on dark, matching --status-info */
    --primary-dark: #7ba4f5;             /* "dark" here means the hover/emphasis step, which on a dark
                                            canvas must go LIGHTER to read as emphasis at all */
    --primary-light: #1b2947;            /* the tinted-surface role, inverted to a deep tint */
    --secondary: #29323f;
    --secondary-dark: #3a4553;
    --success: var(--status-success);
    --danger: var(--status-danger);
    --danger-dark: #ff6575;
    --danger-light: var(--status-danger-surface);
    --danger-text: #ff8a96;
}
}

/* Smooth, non-distracting cross-fade on theme switch; respect reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    :root.theme-transition,
    :root.theme-transition * {
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
}

/* ---- Core application shell wired to tokens (Phase 2 demonstration surfaces) ---- */
body {
    background-color: var(--canvas);
    color: var(--text-primary);
}

/* The appearance control in the left navigation. */
.appearance-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--nav-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.appearance-toggle:hover { background: var(--nav-selected); }
.appearance-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.appearance-toggle .appearance-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.appearance-toggle .appearance-label { flex: 1; }
.appearance-toggle .appearance-state {
    font-size: 0.75rem;
    color: var(--nav-text-muted);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}
.appearance-toggle[aria-checked="true"] .appearance-state { color: var(--nav-text); }
.appearance-error {
    color: var(--status-danger);
    font-size: 0.78rem;
    padding: 0.25rem 0.75rem;
}

/* Appearance control sits at the bottom of the left nav, separated from the links. */
.nav-appearance {
    margin-top: auto;
    padding: 0.5rem 0.5rem 0.75rem;
    border-top: 1px solid var(--nav-selected);
}

/* Shared recruiter reading surfaces: use the same semantic palette in both themes. */
.command-home-shell .section-label { color:var(--text-muted); border-color:var(--border-subtle); }
.command-home-shell .attention-item,
.command-home-shell .continue-item { color:var(--text-primary); background:var(--surface); border-color:var(--border-subtle); text-decoration:none; }
.command-home-shell .attention-item:hover,
.command-home-shell .continue-item:hover { background:var(--interactive-hover); border-color:var(--border-strong); }
.command-home-shell .continue-timestamp,
.command-home-shell .empty-state { color:var(--text-muted); }
.command-home-shell .empty-state { background:var(--surface-sunken); }
.command-home-shell .attention-item:focus-visible,
.command-home-shell .continue-item:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
.command-inbox .alert[role="note"] { color:var(--text-secondary); background:var(--surface); border-color:var(--border-subtle); border-left:3px solid var(--status-info); }
.command-inbox .alert[role="note"] strong { color:var(--text-primary); }
.command-inbox__bar { color:var(--text-secondary); }
.home-command-block h1 { color:var(--text-primary); }
.home-command-block .command-search-card { background:var(--surface); border-color:var(--border-strong); }
.home-command-block .command-search { color:var(--text-primary); background:transparent; }
.home-command-block .command-search::placeholder { color:var(--text-muted); opacity:1; }
.home-command-block .quick-actions .action-button { background:var(--surface); color:var(--text-primary); border-color:var(--border-subtle); }
.home-command-block .quick-actions .action-button:hover { background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border-color:var(--accent); }
:root { --mag-interaction-glow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent),0 8px 28px color-mix(in srgb,var(--accent) 12%,transparent); }
.command-search-card:hover, .command-search-card:focus-within,
.command-entry-link:hover, .command-entry-link:focus-visible {
    border-color:var(--accent);
    box-shadow:var(--mag-interaction-glow);
}
.action-button:not(:disabled):not([aria-disabled="true"]),.command-entry-link { transition:box-shadow .18s ease,border-color .18s ease; }
@media(hover:hover) and (pointer:fine) {
    .action-button:not(:disabled):not([aria-disabled="true"]):hover { box-shadow:var(--mag-interaction-glow); }
}
.action-button:not(:disabled):not([aria-disabled="true"]):focus-visible,
.command-entry-link:focus-visible,
.form-control:focus-visible,.form-select:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:3px;
    box-shadow:var(--mag-interaction-glow);
}
@media(prefers-reduced-motion:reduce) {
    .action-button,.command-entry-link,.command-search-card { transition:none; }
    .action-button:hover { transform:none; }
}
/* Header parent mark uses the same geometry on either canvas without a backing plate.
   Specificity also exceeds the isolated MainLayout .mag-logo-image display rule. */
.mag-logo-link .mag-logo-image.mag-parent-brand-light { display:block; }
.mag-logo-link .mag-logo-image.mag-parent-brand-dark { display:none; }
@media screen {
:root[data-theme="dark"] .mag-logo-link .mag-logo-image.mag-parent-brand-light { display:none; }
:root[data-theme="dark"] .mag-logo-link .mag-logo-image.mag-parent-brand-dark { display:block; }
}
/* Bridge Bootstrap inbox variables to the application appearance tokens. */
.command-inbox {
    --bs-body-bg:var(--surface);
    --bs-body-color:var(--text-primary);
    --bs-secondary-color:var(--text-muted);
    --bs-tertiary-bg:var(--surface-sunken);
    --bs-border-color:var(--border-subtle);
}
.command-inbox .text-success { color:var(--status-success) !important; }
.command-inbox .text-warning-emphasis { color:var(--status-warning) !important; }
.home-command-block .mic-button { color:var(--text-primary); }

/* The approved transparent MAG mark keeps this header light in both appearances. */
.top-row {
    color-scheme: light;
    --canvas: #F5F6F8;
    --surface: #F5F6F8;
    --surface-raised: #ffffff;
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #596575;
    --border-subtle: #D6DCE2;
    --focus-ring: #2563eb;
    --link: #006bb7;
    --link-hover: #00518c;
    color: var(--text-primary);
}
.top-row .command-entry-kbd {
    background: var(--surface);
    color: var(--text-secondary);
}
.top-row .command-entry-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}