/**
 * ThinkTwin Design Tokens (TDS) — canonical CSS variables.
 * Sprint C1 — single source; do not duplicate in other stylesheets.
 */

:root {
    /* Canvas */
    --tds-bg-primary: #0a0b1e;
    --tds-bg-deep: #060712;
    --tds-surface: rgba(14, 16, 38, 0.72);
    --tds-glass-fill: rgba(255, 255, 255, 0.04);
    --tds-border: rgba(255, 255, 255, 0.1);

    /* Brand — Human / Twin */
    --tds-cyan: #22d3ee;
    --tds-blue: #38bdf8;
    --tds-purple: #a855f7;
    --tds-magenta: #c084fc;

    /* Accents */
    --tds-orange: #fb923c;
    --tds-lime: #a3e635;
    --tds-emerald: #10b981;
    --tds-gold: #fbbf24;
    --tds-pink: #f472b6;

    /* Text */
    --tds-text: #f8fafc;
    --tds-muted: rgba(226, 232, 240, 0.72);

    /* Semantic */
    --tds-success: #22c55e;
    --tds-warning: #f59e0b;
    --tds-danger: #ef4444;
    --tds-info: #38bdf8;
    --tds-success-soft: rgba(34, 197, 94, 0.12);
    --tds-warning-soft: rgba(245, 158, 11, 0.12);
    --tds-danger-soft: rgba(239, 68, 68, 0.12);
    --tds-info-soft: rgba(56, 189, 248, 0.12);

    /* Gradients (as custom props for reference) */
    --tds-gradient-cta: linear-gradient(135deg, #7c3aed 0%, #2563eb 50%, #22d3ee 100%);
    --tds-gradient-progress: linear-gradient(90deg, var(--tds-cyan), var(--tds-purple));
    --tds-gradient-success: linear-gradient(90deg, var(--tds-lime), var(--tds-cyan));

    /* Shadow & glow */
    --tds-glow-card: 0 0 40px rgba(168, 85, 247, 0.18);
    --tds-shadow-button: 0 8px 32px rgba(124, 58, 237, 0.35);
    --tds-shadow-button-hover: 0 12px 36px rgba(124, 58, 237, 0.45);
    --tds-shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.28);

    /* Radius */
    --tds-radius-card: 18px;
    --tds-radius-button: 14px;
    --tds-radius-input: 14px;
    --tds-radius-bubble: 16px;
    --tds-radius-pill: 999px;
    --tds-radius-rail: 12px;

    /* Layout */
    --tds-rail-width: 76px;
    --tds-rail-width-expanded: 260px;
    --tds-bottom-nav-height: 72px;
    --tds-dashboard-gap: clamp(16px, 1.9vw, 24px);
    --tds-section-gap: clamp(28px, 3.2vw, 44px);
    --tds-dashboard-header-height: 72px;

    /* DS-2 — nebula / starfield canvas */
    --tds-nebula-purple: rgba(124, 58, 237, 0.22);
    --tds-nebula-cyan: rgba(34, 211, 238, 0.12);
    --tds-nebula-deep: rgba(6, 7, 18, 0.92);
    --tds-star-color: rgba(248, 250, 252, 0.55);
    --tds-star-glow: rgba(168, 85, 247, 0.35);

    /* DS-2 — profile card (expanded sidebar) */
    --tds-profile-card-bg: rgba(255, 255, 255, 0.05);
    --tds-profile-card-border: rgba(168, 85, 247, 0.28);
    --tds-profile-card-glow: 0 0 24px rgba(168, 85, 247, 0.14);
    --tds-profile-name-size: 0.82rem;
    --tds-profile-role-size: 0.68rem;
    --tds-leadership-bar-height: 5px;
    --tds-glow-nav-pill: 0 0 20px rgba(168, 85, 247, 0.28);
    --tds-glow-brain-center: 0 0 28px rgba(34, 211, 238, 0.55), 0 0 48px rgba(168, 85, 247, 0.35);
    --tds-type-greeting: clamp(1.35rem, 2.8vw, 1.85rem);
    --tds-type-card-title: clamp(1rem, 1.8vw, 1.15rem);
    --tds-type-eyebrow: 0.72rem;
    --tds-z-content: 1;
    --tds-z-rail: 30;
    --tds-z-bottomnav: 40;
    --tds-z-modal: 60;
    --tds-z-fab: 45;

    /* Motion */
    --tds-motion-fast: 150ms ease;
    --tds-motion-base: 200ms ease;
    --tds-motion-ring: 800ms ease;
    --tds-motion-drift: 28s ease-in-out;

    /* Spacing scale */
    --tds-space-1: 4px;
    --tds-space-2: 6px;
    --tds-space-3: 8px;
    --tds-space-4: 10px;
    --tds-space-5: 12px;
    --tds-space-6: 14px;
    --tds-space-7: 16px;
    --tds-space-8: 18px;
    --tds-space-9: 20px;
    --tds-space-10: 22px;
    --tds-space-11: 24px;
    --tds-space-12: 32px;

    /* Semantic spacing aliases (Sprint C1 Extension) */
    --space-xs: var(--tds-space-1);
    --space-sm: var(--tds-space-3);
    --space-md: var(--tds-space-5);
    --space-lg: var(--tds-space-7);
    --space-xl: var(--tds-space-11);
    --space-2xl: var(--tds-space-12);

    /* Semantic color aliases */
    --color-human-brain: var(--tds-cyan);
    --color-twin-brain: var(--tds-purple);
    --color-text: var(--tds-text);
    --color-muted: var(--tds-muted);
    --color-border: var(--tds-border);
    --color-surface: var(--tds-surface);
    --color-success: var(--tds-success);
    --color-warning: var(--tds-warning);
    --color-danger: var(--tds-danger);
    --color-info: var(--tds-info);
    --color-bg-primary: var(--tds-bg-primary);
    --color-bg-deep: var(--tds-bg-deep);

    /* Legacy aliases (brief-pwa compatibility) */
    --eos-bg: var(--tds-bg-primary);
    --eos-bg-deep: var(--tds-bg-deep);
    --eos-surface: var(--tds-surface);
    --eos-glass: var(--tds-glass-fill);
    --eos-border: var(--tds-border);
    --eos-cyan: var(--tds-cyan);
    --eos-blue: var(--tds-blue);
    --eos-purple: var(--tds-purple);
    --eos-magenta: var(--tds-magenta);
    --eos-orange: var(--tds-orange);
    --eos-lime: var(--tds-lime);
    --eos-pink: var(--tds-pink);
    --eos-text: var(--tds-text);
    --eos-muted: var(--tds-muted);
    --eos-rail-width: var(--tds-rail-width);
    --eos-rail-width-expanded: var(--tds-rail-width-expanded);
    --eos-bottom-nav-height: var(--tds-bottom-nav-height);
    --eos-nebula-purple: var(--tds-nebula-purple);
    --eos-nebula-cyan: var(--tds-nebula-cyan);
    --eos-nebula-deep: var(--tds-nebula-deep);
    --eos-star-color: var(--tds-star-color);
    --eos-star-glow: var(--tds-star-glow);
    --eos-profile-card-bg: var(--tds-profile-card-bg);
    --eos-profile-card-border: var(--tds-profile-card-border);
    --eos-profile-card-glow: var(--tds-profile-card-glow);
    --eos-radius: var(--tds-radius-card);
    --eos-glow: var(--tds-glow-card);
}

/* Future light mode — swap token values only; components stay unchanged */
[data-theme="light"] {
    --tds-bg-primary: #f8fafc;
    --tds-bg-deep: #eef2f7;
    --tds-surface: rgba(255, 255, 255, 0.92);
    --tds-glass-fill: rgba(15, 23, 42, 0.04);
    --tds-border: rgba(15, 23, 42, 0.12);
    --tds-text: #0f172a;
    --tds-muted: rgba(15, 23, 42, 0.65);
    --tds-glow-card: 0 0 40px rgba(124, 58, 237, 0.12);
    --tds-shadow-panel: 0 12px 40px rgba(15, 23, 42, 0.08);
    --color-text: var(--tds-text);
    --color-muted: var(--tds-muted);
    --color-bg-primary: var(--tds-bg-primary);
    --color-bg-deep: var(--tds-bg-deep);
}