/* =============================================================================
   Whendoist Design Tokens
   Brand System v1.7 - Single Source of Truth
   ============================================================================= */

:root {
    /* ===== Neutral Palette (Tailwind Slate) ===== */
    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;
    --slate-950: #020617;

    /* ===== Brand Colors (Clarity Spectrum) ===== */
    --blue-500: #167BFF;
    --blue-600: #0066E6;      /* Accessible variant */
    --blue-tint: #EAF2FF;

    --purple-400: #8B7CF7;     /* Dark mode primary */
    --purple-500: #6D5EF6;     /* Primary */
    --purple-600: #5B4CF0;     /* Hover */
    --purple-tint: #EFEEFF;

    --magenta-500: #A020C0;
    --magenta-tint: #F3ECFA;

    /* ===== Semantic Colors ===== */
    --red-500: #DC2626;
    --red-600: #C9505A;        /* Impact P1 */
    --amber-600: #B8860B;      /* Impact P2 / Warning */
    --green-600: #1A9160;      /* Impact P3 */
    --green-500: #16A34A;      /* Third-party only */
    --orange-500: #F97316;     /* Warning */

    /* ===== Theme Tokens (Light Mode Default) ===== */
    --bg-canvas: #FFFFFF;
    --bg-panel: var(--slate-100);
    --bg-surface: #FFFFFF;
    --bg-elevated: #FFFFFF;

    --text-primary: #0B1220;
    --text-secondary: rgba(15, 23, 42, 0.64);
    --text-muted: rgba(15, 23, 42, 0.46);
    --text-inverse: #FFFFFF;

    --border-subtle: rgba(15, 23, 42, 0.055);
    --border-default: rgba(15, 23, 42, 0.085);
    --border-strong: rgba(15, 23, 42, 0.12);

    --primary: var(--purple-500);
    --primary-hover: var(--purple-600);
    --primary-tint: #E9E7FF;

    /* ===== Interactive States ===== */
    --interactive-hover: rgba(109, 94, 246, 0.06);
    --interactive-active: rgba(109, 94, 246, 0.10);
    --interactive-pressed: rgba(109, 94, 246, 0.14);
    --focus-ring: rgba(109, 94, 246, 0.22);
    --row-hover: rgba(15, 23, 42, 0.02);
    --bg-inset: rgba(15, 23, 42, 0.02);

    /* ===== Gradients ===== */
    --gradient-primary: linear-gradient(135deg, #6D5EF6 0%, #8B7CF7 50%, #A78BFA 100%);
    --gradient-primary-hover: linear-gradient(135deg, #5B4CF0 0%, #7B6CF5 50%, #9B7BF8 100%);
    --gradient-bg-subtle: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    --gradient-bg-login: linear-gradient(135deg, #F0EDFF 0%, #E8E5FF 25%, #F5F3FF 50%, #EBE8FF 75%, #F8F7FF 100%);

    /* ===== Glass Effects ===== */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-bg-strong: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: 20px;

    /* ===== Shadows (3-Tier) ===== */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.04), 0 4px 24px rgba(15, 23, 42, 0.06);
    --shadow-raised: 0 4px 16px rgba(15, 23, 42, 0.06), 0 8px 40px rgba(15, 23, 42, 0.08);
    --shadow-elevated: 0 12px 48px rgba(15, 23, 42, 0.10), 0 4px 16px rgba(15, 23, 42, 0.06);
    --shadow-overlay: 0 10px 30px rgba(15, 23, 42, 0.10);
    --shadow-cta: 0 4px 20px rgba(109, 94, 246, 0.25), 0 8px 40px rgba(109, 94, 246, 0.15);
    --shadow-cta-hover: 0 6px 28px rgba(109, 94, 246, 0.30), 0 12px 48px rgba(109, 94, 246, 0.18);
    --shadow-glow: 0 0 40px rgba(109, 94, 246, 0.12);
    --shadow-glow-sm: 0 0 24px rgba(109, 94, 246, 0.10);

    /* Drag and hover lift shadows */
    --shadow-drag: 0 8px 24px rgba(15, 23, 42, 0.15), 0 4px 8px rgba(15, 23, 42, 0.08);
    --shadow-hover-lift: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-inner-glow: inset 0 0 0 1px rgba(109, 94, 246, 0.15);

    /* ===== Border Radius Scale ===== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-full: 9999px;

    /* ===== Spacing Scale ===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ===== Motion ===== */
    --duration-instant: 0.1s;
    --duration-fast: 0.15s;
    --duration-normal: 0.2s;
    --duration-slow: 0.3s;
    --duration-emphasis: 0.4s;
    --ease-default: ease;
    --ease-out: ease-out;
    --ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===== Impact Colors ===== */
    --impact-p1: #C9505A;
    --impact-p1-border: #E8A0A6;
    --impact-p1-row: rgba(201, 80, 90, 0.030);
    --impact-p2: #B8860B;
    --impact-p2-border: #D4A84B;
    --impact-p2-row: rgba(184, 134, 11, 0.022);
    --impact-p3: #1A9160;
    --impact-p3-border: #5AB88A;
    --impact-p3-row: rgba(26, 145, 96, 0.030);
    --impact-p4: #6B7385;
    --impact-p4-border: #9CA3B0;
    --impact-p4-row: rgba(107, 115, 133, 0.018);

    /* ===== Mode Colors ===== */
    --autopilot-color: var(--blue-500);
    --autopilot-tint: var(--blue-tint);
    --normal-color: var(--purple-500);
    --normal-tint: var(--purple-tint);
    --brainstorm-color: var(--magenta-500);
    --brainstorm-tint: var(--magenta-tint);

    /* ===== Layout ===== */
    --content-max-width: 1100px;
    --content-padding: 3rem;
    --layout-gap: 1.5rem;
    --header-height: 80px;

    /* ===== Task List Columns ===== */
    --col-date: 58px;
    --col-duration: 60px;  /* Fits "DURATION" at 11px uppercase */
    --col-impact: 44px;
    --col-clarity: 68px;  /* Text labels: Autopilot/—/Brainstorm */
    --col-actions: 28px;
    --col-gap: 6px;
    --rail-width: 2px;

    /* ===== Z-Index Scale ===== */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-toast: 700;
    --z-tooltip: 800;
    --z-max: 9999;

    /* ===== Legacy Aliases (for migration) ===== */
    --dark-bg: var(--bg-canvas);
    --grey-bg: var(--bg-panel);
    --light-bg: var(--bg-surface);
    --elevated-bg: var(--bg-elevated);
    --text: var(--text-primary);
    --text-faint: var(--text-muted);
    --border-hair: var(--border-subtle);
    --border: var(--border-default);

    /* Legacy impact aliases */
    --impact-high: var(--impact-p1);
    --impact-high-border: var(--impact-p1-border);
    --impact-medium: var(--impact-p2);
    --impact-low: var(--impact-p3);
    --impact-min: var(--impact-p4);

    /* Legacy clarity aliases */
    --clear-color: var(--autopilot-color);
    --clear-tint: var(--autopilot-tint);
    --clarity-defined: var(--normal-color);
    --clarity-defined-tint: var(--normal-tint);
    --open-color: var(--brainstorm-color);
    --open-tint: var(--brainstorm-tint);
    --executable-color: var(--autopilot-color);
    --executable-tint: var(--autopilot-tint);
    --defined-color: var(--normal-color);
    --defined-tint: var(--normal-tint);
    --exploratory-color: var(--brainstorm-color);
    --exploratory-tint: var(--brainstorm-tint);

    /* Legacy interactive aliases */
    --row-active: var(--interactive-active);
    --danger: var(--red-500);
    --danger-bg: rgba(220, 38, 38, 0.08);
    --danger-border: rgba(220, 38, 38, 0.22);

    /* Legacy layout aliases */
    --rail-w: var(--rail-width);

    /* ===== Typography ===== */
    --font-app: 'Nunito', sans-serif;
}

/* ===== Dark Mode ===== */
[data-theme="dark"] {
    --bg-canvas: var(--slate-900);
    --bg-panel: var(--slate-800);
    --bg-surface: var(--slate-700);
    --bg-elevated: var(--slate-600);

    --text-primary: var(--slate-50);
    --text-secondary: rgba(248, 250, 252, 0.72);
    --text-muted: rgba(248, 250, 252, 0.48);
    --text-inverse: var(--slate-900);

    --border-subtle: rgba(248, 250, 252, 0.06);
    --border-default: rgba(248, 250, 252, 0.10);
    --border-strong: rgba(248, 250, 252, 0.16);

    --primary: var(--purple-400);
    --primary-hover: #9D8FF8;
    --primary-tint: rgba(109, 94, 246, 0.20);

    --interactive-hover: rgba(109, 94, 246, 0.12);
    --interactive-active: rgba(109, 94, 246, 0.18);
    --interactive-pressed: rgba(109, 94, 246, 0.24);
    --bg-inset: rgba(0, 0, 0, 0.15);
    --focus-ring: rgba(109, 94, 246, 0.32);

    --glass-bg: rgba(15, 23, 42, 0.75);
    --glass-bg-strong: rgba(15, 23, 42, 0.88);
    --glass-border: rgba(248, 250, 252, 0.08);

    --autopilot-tint: rgba(22, 123, 255, 0.15);
    --normal-tint: rgba(109, 94, 246, 0.15);
    --brainstorm-tint: rgba(160, 32, 192, 0.15);

    /* Dark mode gradients */
    --gradient-bg-login: linear-gradient(135deg, #1E293B 0%, #0F172A 50%, #1E293B 100%);
    --gradient-bg-subtle: linear-gradient(180deg, var(--slate-900) 0%, var(--slate-800) 100%);

    /* Dark mode row states */
    --row-hover: rgba(248, 250, 252, 0.03);

    /* Dark mode shadows (reduced for dark backgrounds) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.20);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 24px rgba(0, 0, 0, 0.20);
    --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.20), 0 8px 40px rgba(0, 0, 0, 0.25);
    --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.20);
    --shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.30);
    --shadow-cta: 0 4px 20px rgba(109, 94, 246, 0.35), 0 8px 40px rgba(109, 94, 246, 0.20);
    --shadow-cta-hover: 0 6px 28px rgba(109, 94, 246, 0.40), 0 12px 48px rgba(109, 94, 246, 0.25);

    /* Dark mode drag shadows (higher opacity for dark backgrounds) */
    --shadow-drag: 0 8px 24px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-hover-lift: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-inner-glow: inset 0 0 0 1px rgba(109, 94, 246, 0.25);

    /* Legacy aliases auto-update via CSS custom properties */
}

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

    /* Disable animations globally */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   Animation Keyframes
   ============================================================================= */

/* Checkbox completion pulse - scale bounce with fade */
@keyframes completion-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Floating animation for empty states */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Count-up number animation */
@keyframes count-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ripple effect from drop point */
@keyframes ripple {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(2); opacity: 0; }
}

/* Crossfade for content transitions */
@keyframes crossfade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes crossfade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Lift effect for drag states */
@keyframes lift {
    0% { transform: scale(1); box-shadow: var(--shadow-sm); }
    100% { transform: scale(1.02); box-shadow: var(--shadow-drag); }
}

/* Collapse animation for deleting items */
@keyframes collapse {
    0% {
        opacity: 1;
        max-height: 100px;
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }
    100% {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Staggered fade-in for lists */
@keyframes stagger-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Shine effect for CTA buttons */
@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Slide in from top for new items */
@keyframes slide-in-top {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide right for hover effects */
@keyframes slide-right {
    from { transform: translateX(0); }
    to { transform: translateX(4px); }
}

/* Strikethrough draw animation */
@keyframes strikethrough-draw {
    from { width: 0; }
    to { width: 100%; }
}

/* Progress line fill */
@keyframes progress-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* =============================================================================
   Accessibility Utilities
   ============================================================================= */

/* Skip to main content link (hidden until focused) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    z-index: var(--z-toast);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
}

.skip-link:focus {
    top: 12px;
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Screen reader only (visually hidden) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Make sr-only content visible on focus (for skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: inherit;
}

/* Global focus indicator for links and interactive elements */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Remove outline on mouse click, keep for keyboard */
:focus:not(:focus-visible) {
    outline: none;
}