/**
 * kbnx-tokens.css — Semantic design tokens (Wave 2 PHASE-04-T17/T19).
 *
 * Authoritative root token surface for KBNexus. Defines:
 *   - Semantic color tokens (text/surface/border/accent + state colors).
 *   - Spacing scale (4px base, 0..16 stops).
 *   - Type scale (xs..3xl) + line-heights + weights.
 *   - Shadow scale (xs..xl, inner, focus-ring).
 *   - Radius scale (sm..xl, full).
 *   - Motion (durations + eases).
 *
 * Three render modes:
 *   - Light (default at :root and .kbnx).
 *   - Dark via prefers-color-scheme: dark — overrides at :root AND .kbnx
 *     so legacy public CSS (00-base-core.css) inherits properly.
 *   - High contrast via prefers-contrast: more (with prefers-color-scheme: dark
 *     variant for dark HC) — overrides at :root.
 *
 * Forced-colors mode is intentionally NOT overridden here; it's handled by
 * kbnx-forced-colors.css which uses CSS system colors instead of tokens.
 *
 * Backward compatibility: the .kbnx-scoped dark-mode block bridges the
 * --kbnx-color-bg/fg/text/muted/border namespace defined in
 * assets/src/public/styles/00-base-core.css with the new semantic tokens
 * here, so a single prefers-color-scheme media query lights up both
 * surfaces.
 */

:root {
    /* === Semantic color tokens (text) === */
    --kbnx-color-text-primary: #1f2937;
    --kbnx-color-text-secondary: #4b5563;
    --kbnx-color-text-muted: #6b7280;
    --kbnx-color-text-inverse: #ffffff;
    --kbnx-color-text-on-accent: #ffffff;
    --kbnx-color-text-link: #1f5fa3;
    --kbnx-color-text-link-hover: #163b6e;
    --kbnx-color-text-disabled: #9ca3af;

    /* === Semantic color tokens (surface) === */
    --kbnx-color-surface: #ffffff;
    --kbnx-color-surface-alt: #f9fafb;
    --kbnx-color-surface-raised: #ffffff;
    --kbnx-color-surface-sunken: #f3f4f6;
    --kbnx-color-surface-overlay: rgba(15, 34, 56, 0.55);
    --kbnx-color-surface-hover: #f3f4f6;
    --kbnx-color-surface-selected: #e0eaf6;

    /* === Semantic state colors === */
    --kbnx-color-accent: #2563eb;
    --kbnx-color-accent-hover: #1d4ed8;
    --kbnx-color-accent-soft: #dbeafe;
    --kbnx-color-success: #15803d;
    --kbnx-color-success-soft: #dcfce7;
    --kbnx-color-warning: #b45309;
    --kbnx-color-warning-soft: #fef3c7;
    --kbnx-color-error: #dc2626;
    --kbnx-color-error-soft: #fee2e2;
    --kbnx-color-info: #1f5fa3;
    --kbnx-color-info-soft: #dbeafe;

    /* === Border tokens (3:1 UI contrast per WCAG 1.4.11) === */
    --kbnx-color-border-subtle: #e5e7eb;
    --kbnx-color-border-default: #848a94;
    --kbnx-color-border-strong: #6b7280;
    --kbnx-color-border-focus: var(--kbnx-color-accent);

    /* === Spacing scale (4px base, fluid via rem) === */
    --kbnx-space-0: 0;
    --kbnx-space-1: 0.25rem;   /*  4 */
    --kbnx-space-2: 0.5rem;    /*  8 */
    --kbnx-space-3: 0.75rem;   /* 12 */
    --kbnx-space-4: 1rem;      /* 16 */
    --kbnx-space-5: 1.25rem;   /* 20 */
    --kbnx-space-6: 1.5rem;    /* 24 */
    --kbnx-space-7: 1.75rem;   /* 28 */
    --kbnx-space-8: 2rem;      /* 32 */
    --kbnx-space-10: 2.5rem;   /* 40 */
    --kbnx-space-12: 3rem;     /* 48 */
    --kbnx-space-16: 4rem;     /* 64 */

    /* === Type scale === */
    --kbnx-font-size-xs: 0.75rem;     /* 12 */
    --kbnx-font-size-sm: 0.875rem;    /* 14 */
    --kbnx-font-size-base: 1rem;      /* 16 */
    --kbnx-font-size-lg: 1.125rem;    /* 18 */
    --kbnx-font-size-xl: 1.25rem;     /* 20 */
    --kbnx-font-size-2xl: 1.5rem;     /* 24 */
    --kbnx-font-size-3xl: 1.875rem;   /* 30 */
    --kbnx-line-height-tight: 1.2;
    --kbnx-line-height-snug: 1.35;
    --kbnx-line-height-normal: 1.5;
    --kbnx-line-height-loose: 1.75;
    --kbnx-fw-regular: 400;
    --kbnx-fw-medium: 500;
    --kbnx-fw-semibold: 600;
    --kbnx-fw-bold: 700;

    /* === Shadow scale (subtle by default, increasing emphasis) === */
    --kbnx-shadow-xs: 0 1px 2px rgba(15, 34, 56, 0.05);
    --kbnx-shadow-sm: 0 2px 6px rgba(15, 34, 56, 0.06);
    --kbnx-shadow-md: 0 6px 16px rgba(15, 34, 56, 0.08);
    --kbnx-shadow-lg: 0 12px 28px rgba(15, 34, 56, 0.10);
    --kbnx-shadow-xl: 0 24px 48px rgba(15, 34, 56, 0.14);
    --kbnx-shadow-inner: inset 0 1px 2px rgba(15, 34, 56, 0.06);
    --kbnx-shadow-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

    /* === Radius scale === */
    --kbnx-radius-sm: 0.25rem;
    --kbnx-radius-md: 0.5rem;
    --kbnx-radius-lg: 0.75rem;
    --kbnx-radius-xl: 1rem;
    --kbnx-radius-full: 999px;

    /* === Motion === */
    --kbnx-duration-instant: 80ms;
    --kbnx-duration-fast: 140ms;
    --kbnx-duration-base: 220ms;
    --kbnx-duration-slow: 360ms;
    --kbnx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --kbnx-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
    --kbnx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --kbnx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === Z-index scale (pulled from layout layers) === */
    --kbnx-z-base: 0;
    --kbnx-z-raised: 10;
    --kbnx-z-sticky: 100;
    --kbnx-z-overlay: 1000;
    --kbnx-z-modal: 1100;
    --kbnx-z-toast: 1200;
}

/* === Dark mode (root surface) ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --kbnx-color-text-primary: #e5e7eb;
        --kbnx-color-text-secondary: #cbd5e1;
        --kbnx-color-text-muted: #94a3b8;
        --kbnx-color-text-inverse: #0f1419;
        --kbnx-color-text-on-accent: #ffffff;
        --kbnx-color-text-link: #6fa8dc;
        --kbnx-color-text-link-hover: #8fc4f0;
        --kbnx-color-text-disabled: #64748b;

        --kbnx-color-surface: #1a1f29;
        --kbnx-color-surface-alt: #14181f;
        --kbnx-color-surface-raised: #232a36;
        --kbnx-color-surface-sunken: #0f1419;
        --kbnx-color-surface-overlay: rgba(0, 0, 0, 0.65);
        --kbnx-color-surface-hover: #2a313e;
        --kbnx-color-surface-selected: #2e3a52;

        --kbnx-color-accent: #6fa8dc;
        --kbnx-color-accent-hover: #8fc4f0;
        --kbnx-color-accent-soft: #1f3554;
        --kbnx-color-success: #4ade80;
        --kbnx-color-success-soft: #14321f;
        --kbnx-color-warning: #fbbf24;
        --kbnx-color-warning-soft: #382a0f;
        --kbnx-color-error: #f87171;
        --kbnx-color-error-soft: #3a1a1a;
        --kbnx-color-info: #6fa8dc;
        --kbnx-color-info-soft: #1f3554;

        --kbnx-color-border-subtle: #2a313e;
        --kbnx-color-border-default: #475569;
        --kbnx-color-border-strong: #64748b;
        --kbnx-color-border-focus: var(--kbnx-color-accent);

        --kbnx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
        --kbnx-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
        --kbnx-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.50);
        --kbnx-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);
        --kbnx-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.60);
        --kbnx-shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.40);
        --kbnx-shadow-focus-ring: 0 0 0 3px rgba(111, 168, 220, 0.45);
    }

    /* Bridge to legacy public-surface tokens defined in
     * assets/src/public/styles/00-base-core.css (.kbnx scope).
     * Without overriding at the same scope, the dark-mode :root values
     * are shadowed by the .kbnx-scoped defaults. Re-declaring at .kbnx
     * scope makes prefers-color-scheme: dark light up the public surfaces. */
    .kbnx {
        --kbnx-color-bg: #14181f;
        --kbnx-color-surface: #1a1f29;
        --kbnx-color-border: #2a313e;
        --kbnx-color-text: #e5e7eb;
        --kbnx-color-muted: #94a3b8;
        --kbnx-color-accent: #6fa8dc;
        --kbnx-color-accent-2: #8fc4f0;
    }
}

/* === Manual theme override (explicit dark) ============================== */
[data-kbnx-theme="dark"] {
    color-scheme: dark;
}

[data-kbnx-theme="dark"] .kbnx,
.kbnx[data-kbnx-theme="dark"] {
    --kbnx-color-bg: #14181f;
    --kbnx-color-surface: #1a1f29;
    --kbnx-color-border: #2a313e;
    --kbnx-color-text: #e5e7eb;
    --kbnx-color-muted: #94a3b8;
    --kbnx-color-accent: #6fa8dc;
    --kbnx-color-accent-2: #8fc4f0;
}

/* === High contrast (light) — 7:1+ ratios per WCAG 1.4.6 ================== */
@media (prefers-contrast: more) {
    :root {
        --kbnx-color-text-primary: #000000;
        --kbnx-color-text-secondary: #1a1a1a;
        --kbnx-color-text-muted: #333333;
        --kbnx-color-text-inverse: #ffffff;
        --kbnx-color-text-link: #0000cc;
        --kbnx-color-text-link-hover: #000099;

        --kbnx-color-surface: #ffffff;
        --kbnx-color-surface-alt: #f0f0f0;
        --kbnx-color-surface-raised: #ffffff;
        --kbnx-color-surface-sunken: #e0e0e0;

        --kbnx-color-accent: #0000cc;
        --kbnx-color-accent-hover: #000099;
        --kbnx-color-accent-soft: #cccfff;
        --kbnx-color-error: #cc0000;
        --kbnx-color-error-soft: #ffcccc;
        --kbnx-color-success: #006600;
        --kbnx-color-success-soft: #ccffcc;
        --kbnx-color-warning: #cc6600;
        --kbnx-color-warning-soft: #ffe0cc;

        --kbnx-color-border-subtle: #000000;
        --kbnx-color-border-default: #000000;
        --kbnx-color-border-strong: #000000;
    }
}

/* === High contrast on dark — 7:1+ on dark backgrounds ==================== */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root {
        --kbnx-color-text-primary: #ffffff;
        --kbnx-color-text-secondary: #e5e5e5;
        --kbnx-color-text-muted: #cccccc;
        --kbnx-color-text-inverse: #000000;
        --kbnx-color-text-link: #99bbff;
        --kbnx-color-text-link-hover: #ccddff;

        --kbnx-color-surface: #000000;
        --kbnx-color-surface-alt: #1a1a1a;
        --kbnx-color-surface-raised: #1a1a1a;
        --kbnx-color-surface-sunken: #0a0a0a;

        --kbnx-color-accent: #99bbff;
        --kbnx-color-accent-hover: #ccddff;
        --kbnx-color-accent-soft: #1a3055;
        --kbnx-color-error: #ff6666;
        --kbnx-color-error-soft: #4d0000;
        --kbnx-color-success: #66cc66;
        --kbnx-color-success-soft: #003300;
        --kbnx-color-warning: #ffcc66;
        --kbnx-color-warning-soft: #4d2900;

        --kbnx-color-border-subtle: #ffffff;
        --kbnx-color-border-default: #ffffff;
        --kbnx-color-border-strong: #ffffff;
    }
}

/* === Reduced motion ====================================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --kbnx-duration-instant: 0.01ms;
        --kbnx-duration-fast: 0.01ms;
        --kbnx-duration-base: 0.01ms;
        --kbnx-duration-slow: 0.01ms;
    }
}