/* ═══════════════════════════════════════════════════════════════════
   wit-design-tokens.css — Witline design system token layer.

   Values follow the design contract in
   ai/shared/project-knowledge/design-docs/witline-workspace-design-tokens.md.

   Futuristic flavour: holographic translucent surfaces, neon accents and
   soft glow depth. Theme-aware: the light overrides live in
   wit-futuristic-theme.css and flip the --holo-* / --neon-* primitives this
   layer is built on, so tokens adapt without a second copy of the palette.
   Loaded after wit-futuristic-theme.css and before wit-windows.css.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Typography (size / line / weight) ── */
    --wit-type-display-size: 32px;   --wit-type-display-line: 40px;   --wit-type-display-weight: 700;
    --wit-type-headline-size: 26px;  --wit-type-headline-line: 34px;  --wit-type-headline-weight: 700;
    --wit-type-title-lg-size: 22px;  --wit-type-title-lg-line: 28px;  --wit-type-title-lg-weight: 600;
    --wit-type-title-size: 18px;     --wit-type-title-line: 24px;     --wit-type-title-weight: 600;
    --wit-type-body-lg-size: 16px;   --wit-type-body-lg-line: 24px;
    --wit-type-body-size: 14px;      --wit-type-body-line: 20px;
    --wit-type-label-size: 13px;     --wit-type-label-line: 18px;     --wit-type-label-weight: 600;
    --wit-type-caption-size: 12px;   --wit-type-caption-line: 16px;   --wit-type-caption-weight: 500;
    --wit-type-micro-size: 11px;     --wit-type-micro-line: 14px;     --wit-type-micro-weight: 500;

    /* ── Spacing (4px scale) ── */
    --wit-space-1: 4px;  --wit-space-2: 8px;  --wit-space-3: 12px; --wit-space-4: 16px; --wit-space-5: 20px;
    --wit-space-6: 24px; --wit-space-7: 32px; --wit-space-8: 40px; --wit-space-9: 48px; --wit-space-10: 64px;

    /* ── Radii ── */
    --wit-radius-xs: 6px; --wit-radius-sm: 8px; --wit-radius-md: 12px; --wit-radius-lg: 16px;
    --wit-radius-xl: 24px; --wit-radius-xxl: 32px; --wit-radius-pill: 999px;

    /* ── Elevation: soft, low-contrast; hierarchy leans on scale, not shadow ── */
    --wit-elev-1: 0 2px 8px rgba(0, 0, 0, 0.06);
    --wit-elev-2: 0 4px 16px rgba(0, 0, 0, 0.08);
    --wit-elev-3: 0 8px 28px rgba(0, 0, 0, 0.12);
    --wit-elev-4: 0 12px 40px rgba(0, 0, 0, 0.16);

    /* ── Translucency / blur (never below 0.72 for a legible surface) ── */
    --wit-surface-opacity-panel: 0.88;
    --wit-surface-opacity-floating: 0.78;
    --wit-surface-opacity-sidebar: 0.72;
    --wit-blur-panel: 12px;
    --wit-blur-floating: 16px;
    --wit-blur-sidebar: 20px;

    /* ── Semantic colour roles (bound to the live palette) ── */
    --wit-color-surface: var(--holo-surface);
    --wit-color-surface-high: var(--holo-surface-elevated, var(--holo-surface));
    --wit-color-on-surface: var(--text-primary);
    --wit-color-on-surface-variant: var(--text-secondary);
    --wit-color-primary: var(--neon-primary);
    --wit-color-on-primary: #ffffff;
    --wit-color-outline: var(--holo-border);
    --wit-color-outline-variant: var(--holo-border-subtle);

    /* State overlays (colour-independent states carry an icon or label too) */
    --wit-state-hover: 0.08;
    --wit-state-pressed: 0.12;
    --wit-state-selected: 0.12;
    --wit-state-disabled: 0.38;

    /* ── Motion ── */
    --wit-motion-instant: 0ms;
    --wit-motion-fast: 120ms;
    --wit-motion-normal: 200ms;
    --wit-motion-moderate: 280ms;
    --wit-motion-emphasized: 320ms;
    --wit-motion-slow: 420ms;

    /* Springs (stiffness/damping approximated as a springy bezier; continuity over fades) */
    --wit-spring-snap: cubic-bezier(0.2, 0.9, 0.25, 1.05);
    --wit-spring-default: cubic-bezier(0.34, 1.4, 0.64, 1);
    --wit-spring-focus: cubic-bezier(0.3, 1.2, 0.5, 1);

    /* ── Futuristic depth: holographic glow + gradients ── */
    --wit-glow-sm: 0 0 12px rgba(99, 102, 241, 0.18);
    --wit-glow-md: 0 0 24px rgba(99, 102, 241, 0.28);
    --wit-glow-cyan: 0 0 22px rgba(34, 211, 238, 0.24);
    --wit-gradient-holo: linear-gradient(135deg,
        color-mix(in srgb, var(--neon-primary) 24%, transparent),
        color-mix(in srgb, var(--neon-cyan, var(--neon-secondary)) 18%, transparent) 55%,
        transparent);
    --wit-focus-ring: 2px solid var(--neon-primary);
    --wit-target-min: 48px;
}

/* Reduced motion: durations collapse, springs go linear (token-level, not per-component). */
@media (prefers-reduced-motion: reduce) {
    :root {
        --wit-motion-fast: 0ms;
        --wit-motion-normal: 0ms;
        --wit-motion-moderate: 0ms;
        --wit-motion-emphasized: 0ms;
        --wit-motion-slow: 0ms;
        --wit-spring-snap: linear;
        --wit-spring-default: linear;
        --wit-spring-focus: linear;
        --wit-glow-sm: none;
        --wit-glow-md: none;
        --wit-glow-cyan: none;
    }
}

/* High-contrast: replace translucency with opaque surfaces and disable blur. */
@media (prefers-contrast: more) {
    :root {
        --wit-surface-opacity-panel: 1;
        --wit-surface-opacity-floating: 1;
        --wit-surface-opacity-sidebar: 1;
        --wit-blur-panel: 0px;
        --wit-blur-floating: 0px;
        --wit-blur-sidebar: 0px;
    }
}

/* ---------------------------------------------------------------------------
   Accessibility baseline (2026-10-03). The --wit-focus-ring token existed but was
   applied only per-component (win-start, kiosk, top-bar, one page); this makes focus
   visible on EVERY interactive element, and adds a skip-to-content link for keyboard
   users. Uses the tokens above; prefers-reduced-motion + prefers-contrast already handled.
   --------------------------------------------------------------------------- */
:focus-visible {
    outline: var(--wit-focus-ring);
    outline-offset: 2px;
    border-radius: var(--wit-radius-xs);
}
/* Do not show the ring for a mouse click, only for keyboard/programmatic focus. */
:focus:not(:focus-visible) { outline: none; }

/* Skip link: off-screen until focused, then pinned top-left over the shell. */
.wit-skip-link {
    position: absolute;
    left: var(--wit-space-3);
    top: -4rem;
    z-index: 10000;
    padding: var(--wit-space-2) var(--wit-space-4);
    background: var(--wit-color-surface-high);
    color: var(--wit-color-on-surface);
    border: 1px solid var(--wit-color-outline);
    border-radius: var(--wit-radius-sm);
    box-shadow: var(--wit-elev-3);
    text-decoration: none;
    font-size: var(--wit-type-label-size);
    line-height: var(--wit-type-label-line);
    font-weight: var(--wit-type-label-weight);
    transition: top var(--wit-motion-fast) ease;
}
.wit-skip-link:focus { top: var(--wit-space-3); }

@media (prefers-reduced-motion: reduce) { .wit-skip-link { transition: none; } }

/* ---------------------------------------------------------------------------
   Global motion contract (2026-10-03). The token layer above only collapses the
   --wit-motion-* tokens; the theme/override stylesheet layer (wit-overrides,
   futuristic-*, skeuomorphic-sci-fi, ...) hardcodes many animation/transition
   declarations that bypass those tokens, so vestibular-sensitive users still saw
   the motion. Collapse ALL motion at the source, including hardcoded values, and
   disable smooth scrolling. Functional/state changes remain (the value still
   changes) — only their animation is removed.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    /* Parallax / decorative transforms are not functional; neutralise them. */
    [data-parallax], .wit-parallax, .wit-orb, .wit-cosmic-layer {
        transform: none !important;
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Forced colors (Windows High Contrast). Translucent holographic surfaces and
   glow shadows collapse to nothing under forced-colors; re-assert solid system
   borders and text so controls stay perceivable and focused elements stay visible.
   --------------------------------------------------------------------------- */
@media (forced-colors: active) {
    *, *::before, *::after {
        box-shadow: none !important;
        text-shadow: none !important;
        backdrop-filter: none !important;
    }
    .wit-glass, .wit-surface, .wit-panel, .wit-card, [class*="holo"] {
        background: Canvas !important;
        border: 1px solid CanvasText !important;
        color: CanvasText !important;
    }
    :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
    .wit-skip-link { background: Canvas !important; color: CanvasText !important; border: 1px solid CanvasText !important; }
}

/* ---------------------------------------------------------------------------
   Colour scheme. Declares that the app opts into native form-control / scrollbar
   theming for both schemes (the live theme tokens drive the actual palette).
   --------------------------------------------------------------------------- */
:root { color-scheme: light dark; }