/* =========================================================================
   Neuji design system
   - Semantic CSS custom properties for theming.
   - Theme: system (default) / light / dark via [data-theme].
   - Independent high-contrast layer via [data-contrast="high"], also honoring
     @media (prefers-contrast) and (forced-colors).
   - Font-size scaling via [data-font-size]. Reduced-motion respected.
   Component-specific styles (search, results, settings, marketing) are appended
   in later layers/files.
   ========================================================================= */

/* ----------------------------- Tokens: light ---------------------------- */
:root {
    color-scheme: light;

    --brand: #4f46e5;          /* indigo-600 */
    --brand-strong: #4338ca;
    --brand-stronger: #3730a3;
    --brand-contrast: #ffffff; /* text on brand */
    --brand-soft: #eef2ff;     /* tinted surface */
    --accent: #7c3aed;         /* violet highlight */

    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-2: #f7f7fb;
    --surface-3: #f1f0f7;
    --text: #19172a;
    --text-muted: #6b6880;
    --text-subtle: #908da6;
    --border: #e6e4ef;
    --border-strong: #cbc8db;
    --input-bg: #ffffff;
    --ring: #4f46e5;

    --success: #15803d;
    --success-soft: #dcfce7;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --warning: #b45309;
    --warning-soft: #fef3c7;
    --info: #1d4ed8;
    --info-soft: #dbeafe;

    --radius-sm: 0.375rem;
    --radius: 0.625rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(16, 12, 40, 0.06), 0 1px 3px rgba(16, 12, 40, 0.04);
    --shadow: 0 4px 12px rgba(16, 12, 40, 0.08), 0 2px 4px rgba(16, 12, 40, 0.04);
    --shadow-lg: 0 16px 48px rgba(16, 12, 40, 0.16);

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

    /* Z-index scale */
    --z-sticky: 9;
    --z-fixed: 10;
    --z-header: 50;
    --z-dropdown: 100;
    --z-popover: 200;
    --z-toast: 1000;
    --z-modal: 10000;
    --z-modal-overlay: 10002;

    --header-height: 64px;
}

/* Explicit light (when user forces light) — same as defaults. */
[data-theme="light"] { color-scheme: light; }

/* ----------------------------- Tokens: dark ----------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --brand: #8b85ff;
        --brand-strong: #a5a0ff;
        --brand-stronger: #c4c0ff;
        --brand-contrast: #14121f;
        --brand-soft: #1e1b34;
        --accent: #a78bfa;

        --bg: #0b0a12;
        --bg-elevated: #14121f;
        --surface: #14121f;
        --surface-2: #1b1830;
        --surface-3: #241f3a;
        --text: #f4f2fb;
        --text-muted: #a8a4bd;
        --text-subtle: #7d7996;
        --border: #2a2542;
        --border-strong: #3b3557;
        --input-bg: #1b1830;
        --ring: #8b85ff;

        --success: #4ade80;
        --success-soft: #14321f;
        --danger: #f87171;
        --danger-soft: #3a1717;
        --warning: #fbbf24;
        --warning-soft: #3a2a08;
        --info: #60a5fa;
        --info-soft: #16243f;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
    }
}

[data-theme="dark"] {
    color-scheme: dark;

    --brand: #8b85ff;
    --brand-strong: #a5a0ff;
    --brand-stronger: #c4c0ff;
    --brand-contrast: #14121f;
    --brand-soft: #1e1b34;
    --accent: #a78bfa;

    --bg: #0b0a12;
    --bg-elevated: #14121f;
    --surface: #14121f;
    --surface-2: #1b1830;
    --surface-3: #241f3a;
    --text: #f4f2fb;
    --text-muted: #a8a4bd;
    --text-subtle: #7d7996;
    --border: #2a2542;
    --border-strong: #3b3557;
    --input-bg: #1b1830;
    --ring: #8b85ff;

    --success: #4ade80;
    --success-soft: #14321f;
    --danger: #f87171;
    --danger-soft: #3a1717;
    --warning: #fbbf24;
    --warning-soft: #3a2a08;
    --info: #60a5fa;
    --info-soft: #16243f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* ----------------------- High contrast (independent) -------------------- */
/* Light high-contrast: maximal separation, near-black on white, strong borders. */
[data-contrast="high"] {
    --text: #000000;
    --text-muted: #1a1a1a;
    --text-subtle: #333333;
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #f0f0f0;
    --border: #000000;
    --border-strong: #000000;
    --input-bg: #ffffff;
    --brand: #1500c7;
    --brand-strong: #0d007a;
    --brand-contrast: #ffffff;
    --brand-soft: #e4e0ff;
    --ring: #1500c7;
    --danger: #b00000;
    --success: #006400;
    --shadow-sm: none;
    --shadow: 0 0 0 1px #000000;
    --shadow-lg: 0 0 0 2px #000000;
}

/* Dark high-contrast: white on black. */
[data-theme="dark"][data-contrast="high"] {
    --text: #ffffff;
    --text-muted: #f0f0f0;
    --text-subtle: #d0d0d0;
    --bg: #000000;
    --bg-elevated: #000000;
    --surface: #000000;
    --surface-2: #0a0a0a;
    --surface-3: #1a1a1a;
    --border: #ffffff;
    --border-strong: #ffffff;
    --input-bg: #000000;
    --brand: #b9b3ff;
    --brand-strong: #d9d6ff;
    --brand-contrast: #000000;
    --brand-soft: #1a1733;
    --ring: #ffff00;
}
@media (prefers-color-scheme: dark) {
    :root[data-contrast="high"]:not([data-theme="light"]) {
        --text: #ffffff;
        --text-muted: #f0f0f0;
        --text-subtle: #d0d0d0;
        --bg: #000000;
        --bg-elevated: #000000;
        --surface: #000000;
        --surface-2: #0a0a0a;
        --surface-3: #1a1a1a;
        --border: #ffffff;
        --border-strong: #ffffff;
        --input-bg: #000000;
        --brand: #b9b3ff;
        --brand-strong: #d9d6ff;
        --brand-contrast: #000000;
        --brand-soft: #1a1733;
        --ring: #ffff00;
    }
}

/* System-level contrast preference (no explicit toggle): nudge borders stronger. */
@media (prefers-contrast: more) {
    :root:not([data-contrast]) {
        --border: var(--border-strong);
        --text-muted: var(--text);
    }
}

/* Windows High Contrast / forced colors: let the OS drive colors, keep borders. */
@media (forced-colors: active) {
    * { forced-color-adjust: auto; }
    .btn, .field-input, .card, .toggle-track {
        border: 1px solid;
    }
    :focus-visible { outline: 2px solid; }
}

/* ----------------------------- Font sizing ------------------------------ */
:root { font-size: 16px; }
[data-font-size="small"] { font-size: 14px; }
[data-font-size="medium"] { font-size: 16px; }
[data-font-size="large"] { font-size: 18px; }
[data-font-size="xl"] { font-size: 20px; }

/* ------------------------------- Reset ---------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body {
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body { min-height: 100vh; display: flex; flex-direction: column; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; color: var(--text); letter-spacing: -0.011em; }

img { max-width: 100%; display: block; }

/* Project rule: avoid the focus outline on the first H1 targeted by FocusOnNavigate. */
h1:focus { outline: none; }

/* ----------------------------- Utilities -------------------------------- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; inset-inline-start: 0.5rem; top: -3rem; z-index: var(--z-toast);
    background: var(--brand); color: var(--brand-contrast);
    padding: 0.5rem 0.875rem; border-radius: var(--radius-sm); font-weight: 600;
    transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; text-decoration: none; }

.container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 1.25rem; }
.container-narrow { max-width: 760px; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }

.muted { color: var(--text-muted); }
.text-center { text-align: center; }

/* ------------------------------- Buttons -------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    font: inherit; font-weight: 600; line-height: 1; cursor: pointer;
    padding: 0.625rem 1.125rem; border-radius: var(--radius);
    border: 1px solid transparent; background: var(--surface-2); color: var(--text);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(0.5px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
/* Submit-in-progress (set by 70-form-busy.ts): a leading spinner + progress cursor, kept disabled. */
.btn.is-busy { cursor: progress; }
.btn.is-busy::before {
    content: ""; display: inline-block; width: 1em; height: 1em; margin-inline-end: 0.5em; vertical-align: -0.15em;
    border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor; animation: neuji-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before { animation-duration: 1.6s; } }

.btn-primary { background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--brand-contrast); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }

.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }

.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-lg { padding: 0.85rem 1.5rem; font-size: 1.0625rem; border-radius: var(--radius-lg); }
.btn-sm { padding: 0.4rem 0.7rem; font-size: 0.875rem; }
/* Full-width buttons may wrap their label (long CTAs) instead of overflowing when text is scaled up. */
.btn-block { width: 100%; white-space: normal; line-height: 1.25; }

/* ------------------------------- Cards ---------------------------------- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.card-body { padding: 1.5rem; }

/* ------------------------------- Forms ---------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1.1rem; }
.field-label { font-weight: 600; font-size: 0.9375rem; color: var(--text); }
.field-hint { font-size: 0.8125rem; color: var(--text-muted); }
.field-error { font-size: 0.8125rem; color: var(--danger); font-weight: 500; }

.field-input, .field-select, .field-textarea {
    font: inherit; width: 100%; color: var(--text); background: var(--input-bg);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    padding: 0.625rem 0.75rem; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}
.field-input::placeholder { color: var(--text-subtle); }
.field-textarea { resize: vertical; min-height: 6rem; }

/* Toggle switch. Track 2.75rem×1.625rem, thumb 1.25rem with a 0.1875rem inset on every side, so the
   thumb is vertically centered (top:50% + translateY) and the checked offset is symmetric:
   travel = track − thumb − 2×inset = 2.75 − 1.25 − 0.375 = 1.125rem. gap spaces the trailing label. */
.toggle { position: relative; display: inline-flex; align-items: center; gap: 0.625rem; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
    width: 2.75rem; height: 1.625rem; border-radius: var(--radius-pill);
    background: var(--border-strong); position: relative; flex: none;
    transition: background-color 0.18s ease;
}
.toggle-thumb {
    position: absolute; top: 50%; inset-inline-start: 0.1875rem; transform: translateY(-50%);
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm);
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.toggle input:checked + .toggle-track { background: var(--brand); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translate(1.125rem, -50%); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--ring); outline-offset: 2px; }
.toggle:has(input:disabled) { cursor: not-allowed; opacity: 0.55; }

/* Segmented control (theme/font pickers) */
.segmented { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.segmented-option {
    font: inherit; font-weight: 600; font-size: 0.875rem; cursor: pointer;
    padding: 0.4rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid transparent;
    background: transparent; color: var(--text-muted);
}
.segmented-option.active { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); }

/* ------------------------------- Alerts --------------------------------- */
.alert { padding: 0.875rem 1rem; border-radius: var(--radius); border: 1px solid; font-size: 0.9375rem; }
.alert-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.alert-success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.alert-info { background: var(--info-soft); border-color: var(--info); color: var(--info); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }

/* ------------------------------- Badges --------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 600;
    padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted);
    border: 1px solid var(--border);
}
.badge-brand { background: var(--brand-soft); color: var(--brand-strong); border-color: transparent; }

/* ------------------------------ App shell ------------------------------- */
.app-header {
    /* min-height (not height) + vertical padding so the bar can grow when text is scaled up instead of
       clipping; flex-wrap is a final safety net so the row can never force horizontal overflow. */
    min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.5rem 1.25rem; border-bottom: 1px solid var(--border);
    background: var(--bg-elevated); position: sticky; top: 0; z-index: var(--z-header);
}
.brand-mark { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.25rem; color: var(--text); letter-spacing: -0.02em; }
.brand-mark:hover { text-decoration: none; }
.brand-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--accent)); }

main { flex: 1 1 auto; }

.app-footer { border-top: 1px solid var(--border); padding: 2rem 1.25rem; color: var(--text-muted); font-size: 0.875rem; }

/* Region switcher (admin search config — per-region) */
.region-switch { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 1.25rem; flex-wrap: wrap; }

/* ------------------------------ Spinner --------------------------------- */
.spinner {
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); border-top-color: var(--brand);
    animation: neuji-spin 0.7s linear infinite; display: inline-block;
}
@keyframes neuji-spin { to { transform: rotate(360deg); } }

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important; scroll-behavior: auto !important;
    }
}