/* ============================================================
   TTX 4.6.0 design tokens — no React
   Loaded after theme-*.css + tokens.css. Extends the existing
   semantic palette with type, space, focus, motion, and
   Obsidian-inspired surface language. Themes stay the source
   for color; this file is the source for shape / type / focus.
   ============================================================ */

:root {
    /* Type — Inter / Source Sans 3 already loaded in base.html */
    --font-sans: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --font-display: var(--font-display, 'Source Sans 3', 'Inter', sans-serif);
    --font-mono: var(--font-mono, ui-monospace, 'SF Mono', Consolas, monospace);

    --text-xs: 0.75rem;      /* 12 */
    --text-sm: 0.8125rem;    /* 13 */
    --text-base: 0.9375rem;  /* 15 */
    --text-md: 1rem;         /* 16 */
    --text-lg: 1.125rem;     /* 18 */
    --text-xl: 1.25rem;      /* 20 */
    --text-2xl: 1.5rem;      /* 24 */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --tracking-tight: -0.02em;
    --tracking-wide: 0.06em;

    /* Space scale (4px base) — tokens.css already has --space-1..5 */
    --space-0: 0;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;

    /* Focus ring — visible, never rely on color alone */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--color-accent, var(--accent-green, #3f6b52));
    --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);

    /* Extra motion tokens */
    --motion-med: 220ms;
    --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Obsidian-inspired chrome (mapped through theme colors) */
    --ttx-tab-ink: var(--color-text-muted);
    --ttx-tab-ink-active: var(--color-text);
    --ttx-tab-rule: var(--color-border);
    --ttx-tab-rule-active: var(--color-accent);
    --ttx-otp-size: 44px;
}

/* Light themes already defined on tokens.css; keep on-accent readable */
html[data-theme="corporate"],
html[data-theme="neutral"] {
    --focus-ring-color: var(--color-accent, #3f6b52);
}

html[data-theme="intel"],
html[data-theme="navy"],
html[data-theme="cyber"],
html[data-theme="osint"],
html[data-theme="hacker"] {
    --focus-ring-color: var(--color-accent-3, var(--accent-cyan, #5eead4));
}

/* Keyboard focus — do not steal mouse users' chrome */
.ttx-focusable:focus-visible,
ttx-tabs [role="tab"]:focus-visible,
ttx-card:focus-visible,
.ttx-otp-digit:focus-visible,
.ttx-cta:focus-visible,
a.ttx-hub-card:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Reduced motion: collapse durations; JS skips GSAP / WC animation */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0.01ms;
        --motion-press: 0.01ms;
        --motion-med: 0.01ms;
    }

    html.ttx-reduce-motion *,
    html.ttx-reduce-motion *::before,
    html.ttx-reduce-motion *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}