/* ============================================================
   TTX semantic design tokens
   Loaded after the active theme. Maps theme palettes to a
   stable text / surface / border / accent / status language
   so kit + layout stay theme-agnostic.
   ============================================================ */

:root {
    /* Text */
    --color-text: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-muted: var(--text-muted);
    --color-text-on-accent: #ffffff;

    /* Surfaces */
    --color-surface: var(--bg-primary);
    --color-surface-raised: var(--bg-secondary);
    --color-surface-sunken: var(--bg-tertiary);
    --color-surface-card: var(--bg-card);
    --color-surface-hover: var(--bg-card-hover);
    --color-sidebar: var(--sidebar-surface, var(--bg-secondary));
    --color-nav-active: color-mix(in srgb, var(--accent-green) 12%, transparent);
    --color-brand: var(--brand-mark, var(--accent-green));
    --color-brand-wash: var(--brand-wash, var(--bg-secondary));

    /* Borders */
    --color-border: var(--border-color);
    --color-border-strong: var(--border-glow);

    /* Accent — primary is sage/forest (or theme equivalent), not neon cyan */
    --color-accent: var(--accent-green);
    --color-accent-2: var(--accent-blue);
    --color-accent-3: var(--accent-cyan);

    /* Status */
    --color-status-ok: var(--accent-green);
    --color-status-warn: var(--accent-yellow);
    --color-status-danger: var(--accent-red);
    --color-status-info: var(--accent-blue);
    --color-status-idle: var(--text-muted);

    /* Shape — soft enterprise cards (A + B hybrid) */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-inner: calc(var(--radius-md) - 4px);

    /* Elevation — ink, never neon glow */
    --shadow-1: 0 1px 2px rgba(32, 40, 36, 0.06);
    --shadow-2: 0 6px 18px rgba(32, 40, 36, 0.08);
    --shadow-3: 0 16px 36px rgba(32, 40, 36, 0.12);

    /* Motion — never transition: all; frequent hovers ≤150ms */
    --motion-fast: 120ms;
    --motion-press: 80ms;
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Hit targets */
    --hit: 44px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
}

/* Light themes: warmer, quieter shadows */
html[data-theme="corporate"],
html[data-theme="neutral"] {
    --color-text-on-accent: #ffffff;
    --shadow-1: 0 1px 2px rgba(42, 51, 48, 0.06);
    --shadow-2: 0 8px 20px rgba(42, 51, 48, 0.07);
    --shadow-3: 0 18px 40px rgba(42, 51, 48, 0.10);
}

/* Dark themes: deeper cards, still no glow */
html[data-theme="intel"],
html[data-theme="navy"],
html[data-theme="cyber"],
html[data-theme="osint"],
html[data-theme="hacker"] {
    --color-text-on-accent: #0c1210;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-2: 0 8px 22px rgba(0, 0, 0, 0.32);
    --shadow-3: 0 18px 40px rgba(0, 0, 0, 0.4);
    --color-nav-active: color-mix(in srgb, var(--accent-green) 18%, transparent);
}

html[data-theme="hacker"] {
    --color-text-on-accent: #041208;
}

/* Suppress transitions while a theme swap settles */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
    animation: none !important;
}