/* ============================================================================
   THEME SYSTEM - CSS Variables + Light/Dark Mode
   Load this file FIRST, before all other CSS files.
   ============================================================================ */

/* ============================================================================
   WIREFRAME TOKENS (light-first design system, migration in progress)
   These are mode-agnostic across both blocks: brand, typography, radius,
   role colors. Surface + text + shadow variants are split per mode further
   down in each block. Components using these tokens get the new look
   automatically as pages migrate to the wireframe styling.
   ============================================================================ */

/* ============= DARK MODE (DEFAULT) ============= */
:root {
    /* Backgrounds - GitHub dark default */
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;

    /* Text - hierarchy via weight/size, not opacity.
       Lifted secondary so body copy doesn't read as "disabled" grey;
       muted now sits where secondary used to, for true meta-meta info. */
    --text-primary: #e6edf3;
    --text-secondary: #c9d1d9;
    --text-muted: #8b949e;

    /* Borders */
    --border: #30363d;
    --border-light: #484f58;

    /* Accent (blue) */
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-deep: #1e40af;
    --accent-glow: rgba(var(--accent-rgb), 0.4);
    --accent-bg: rgba(var(--accent-rgb), 0.1);
    --accent-light: #60a5fa;
    --accent-lighter: #93c5fd;

    /* Status colors */
    --green: #22c55e;
    --red: #ef4444;
    --yellow: #fbbf24;
    --orange: #f97316;
    --purple: #a855f7;
    --pink: #ec4899;
    --cyan: #22d3ee;

    /* RGB channels (for rgba() with variable opacity) */
    --accent-rgb: 59, 130, 246;
    --green-rgb: 34, 197, 94;
    --red-rgb: 239, 68, 68;
    --yellow-rgb: 251, 191, 36;
    --orange-rgb: 249, 115, 22;
    --purple-rgb: 168, 85, 247;
    --pink-rgb: 236, 72, 153;
    --cyan-rgb: 34, 211, 238;

    /* Shadows - stronger on dark bg */
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.2), 0 2px 4px -2px rgba(0,0,0,0.15);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.25), 0 4px 6px -4px rgba(0,0,0,0.15);

    /* Terminal */
    --terminal-bg: #0d1117;
    --terminal-text: #e6edf3;
    --terminal-cmd: #38bdf8;
    --terminal-out: #8b949e;
    --terminal-prompt: #22c55e;

    /* Overlay / Nav */
    --overlay-bg: rgba(13, 17, 23, 0.95);
    --nav-bg: rgba(13, 17, 23, 0.85);
    --card-shadow: none;

    /* Editor */
    --editor-bg: #161b22;
    --editor-gutter: #0d1117;
    --editor-line-num: #484f58;
    --editor-text: #e6edf3;

    /* Dashboard semantic aliases */
    --bg-page: #0a0a0f;
    --bg-surface: var(--bg-primary);
    --bg-card: var(--bg-secondary);
    --bg-inset: var(--bg-tertiary);
    --text-faint: #484f58;
    --text-dim: #8b949e;
    --text-subtle: #475569;
    --border-strong: #334155;
    --accent-softer: #93c5fd;
    --shadow-frame: rgba(0,0,0,0.4);
    --shadow-dropdown: rgba(0,0,0,0.3);
    --hover-row: rgba(59,130,246,0.03);
    --hover-role: rgba(59,130,246,0.06);
    --code-bg: rgba(59,130,246,0.1);

    /* ----- WIREFRAME TOKENS (dark variants) ----- */

    /* Brand orange - the primary action color across the whole product.
       Same hex in both modes; saturated enough to read on either bg. */
    --brand:        #F97316;
    --brand-hi:     #FB923C;
    --brand-deep:   #EA580C;
    --brand-tint:   rgba(249, 115, 22, 0.18);
    --brand-glow:   rgba(249, 115, 22, 0.40);

    /* Accent blue - secondary / "verified" duty */
    --wf-accent:        #3B82F6;
    --wf-accent-hi:     #60A5FA;
    --wf-accent-deep:   #2563EB;
    --wf-accent-tint:   rgba(59, 130, 246, 0.18);
    --wf-accent-glow:   rgba(59, 130, 246, 0.30);

    /* Surfaces */
    --wf-bg:           #0B0D12;
    --wf-bg-tint:      #11151C;
    --wf-bg-soft:      #161B25;
    --wf-bg-card:      #161B22;
    --wf-bg-warm:      rgba(249, 115, 22, 0.08);
    --wf-bg-code:      #0B0D12;

    /* Borders */
    --wf-border:       #2A3142;
    --wf-border-mid:   #3A4255;
    --wf-border-strong:#4B5563;

    /* Text */
    --wf-text:         #F2F4F8;
    --wf-text-mid:     #C9D1D9;
    --wf-text-low:     #9DA5B4;
    --wf-text-dim:     #6B7180;

    /* Problem state (incidents, validation errors, "broken" code) */
    --wf-problem:      #F87171;
    --wf-problem-bg:   rgba(225, 29, 72, 0.18);

    /* Role colors (same brand-saturated palette in both modes) */
    --role-devops:  #C084FC;
    --role-backend: #60A5FA;
    --role-security:#FB7185;
    --role-data:    #FBBF24;
    --role-ai:      #4ADE80;
    --role-k8s:     #22D3EE;
    --role-full:    #F472B6;

    /* Typography */
    --f-ui:   'Sora', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

    /* Radius scale */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 22px;

    /* Shadows - heavier in dark mode */
    --sh-card:   0 1px 2px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.40);
    --sh-card-hi:0 2px 4px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.50);
    --sh-cta:    0 2px 6px rgba(0,0,0,0.20);
    --sh-code:   0 16px 40px rgba(0,0,0,0.60);
}

/* ============= LIGHT MODE ============= */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f6f8fa;
    --bg-tertiary: #d0d7de;

    --text-primary: #0B0D12;
    --text-secondary: #4B5563;
    --text-muted: #6B7280;

    --border: #d0d7de;
    --border-light: #d8dee4;

    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-deep: #1e40af;
    --accent-glow: rgba(var(--accent-rgb), 0.3);
    --accent-bg: rgba(var(--accent-rgb), 0.06);
    --accent-light: #3b82f6;
    --accent-lighter: #60a5fa;

    --green: #16a34a;
    --red: #dc2626;
    --yellow: #d97706;
    --orange: #ea580c;
    --purple: #9333ea;
    --pink: #db2777;
    --cyan: #0891b2;

    /* RGB channels */
    --accent-rgb: 37, 99, 235;
    --green-rgb: 22, 163, 74;
    --red-rgb: 220, 38, 38;
    --yellow-rgb: 217, 119, 6;
    --orange-rgb: 234, 88, 12;
    --purple-rgb: 147, 51, 234;
    --pink-rgb: 219, 39, 119;
    --cyan-rgb: 8, 145, 178;

    /* Shadows */
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.07);

    /* Terminal follows theme */
    --terminal-bg: #ffffff;
    --terminal-text: #0B0D12;
    --terminal-cmd: #2563eb;
    --terminal-out: #656d76;
    --terminal-prompt: #16a34a;

    --overlay-bg: rgba(255, 255, 255, 0.95);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    --editor-bg: #ffffff;
    --editor-gutter: #f0f0f0;
    --editor-line-num: #8b949e;
    --editor-text: #1f2328;

    /* Dashboard semantic aliases */
    --bg-page: #f1f5f9;
    --bg-surface: var(--bg-primary);
    --bg-card: var(--bg-secondary);
    --bg-inset: var(--bg-tertiary);
    --text-faint: #94a3b8;
    --text-dim: #475569;
    --text-subtle: #64748b;
    --border-strong: #9ca3af;
    --accent-softer: #60a5fa;
    --shadow-frame: rgba(0,0,0,0.08);
    --shadow-dropdown: rgba(0,0,0,0.1);
    --hover-row: rgba(59,130,246,0.04);
    --hover-role: rgba(59,130,246,0.08);
    --code-bg: rgba(59,130,246,0.08);

    /* ----- WIREFRAME TOKENS (light variants - the design source of truth) ----- */

    /* Brand orange */
    --brand:        #F97316;
    --brand-hi:     #FB923C;
    --brand-deep:   #EA580C;
    --brand-tint:   #FFEDD5;
    --brand-glow:   rgba(249, 115, 22, 0.30);

    /* Accent blue - secondary / "verified" */
    --wf-accent:        #2563EB;
    --wf-accent-hi:     #3B82F6;
    --wf-accent-deep:   #1D4ED8;
    --wf-accent-tint:   #DBEAFE;
    --wf-accent-glow:   rgba(37, 99, 235, 0.22);

    /* Surfaces */
    --wf-bg:           #FFFFFF;
    --wf-bg-tint:      #F6F8FB;
    --wf-bg-soft:      #FAFBFD;
    --wf-bg-card:      #FFFFFF;
    --wf-bg-warm:      #FFF7ED;
    --wf-bg-code:      #0B0D12;  /* code surfaces stay dark even in light mode */

    /* Borders */
    --wf-border:       #E5E8EE;
    --wf-border-mid:   #CFD4DC;
    --wf-border-strong:#9CA3AF;

    /* Text */
    --wf-text:         #0B0D12;
    --wf-text-mid:     #4B5563;
    --wf-text-low:     #6B7280;
    --wf-text-dim:     #9CA3AF;

    /* Problem state */
    --wf-problem:      #E11D48;
    --wf-problem-bg:   #FFE4E6;

    /* Role colors - tuned for light bg, no green */
    --role-devops:  #7C3AED;
    --role-backend: #2563EB;
    --role-security:#BE123C;
    --role-data:    #CA8A04;
    --role-ai:      #3FB950;
    --role-k8s:     #0891B2;
    --role-full:    #DB2777;

    /* Typography - same in both modes */
    --f-ui:   'Sora', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

    /* Radius scale - same in both modes */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 22px;

    /* Shadows - softer in light mode */
    --sh-card:   0 1px 2px rgba(11,13,18,0.04), 0 4px 16px rgba(11,13,18,0.05);
    --sh-card-hi:0 2px 4px rgba(11,13,18,0.06), 0 12px 28px rgba(11,13,18,0.09);
    --sh-cta:    0 2px 6px rgba(11,13,18,0.12);
    --sh-code:   0 16px 40px rgba(11,13,18,0.18);
}

/* ============= TAILWIND UTILITY OVERRIDES (Light Mode Only) ============= */
/* Remap dark-first Tailwind classes so they work in light mode.
   Dark mode uses the Tailwind defaults. Light mode overrides via CSS. */

[data-theme="light"] .bg-slate-950 { background-color: var(--bg-primary) !important; }
[data-theme="light"] .bg-slate-900 { background-color: var(--bg-secondary) !important; }
[data-theme="light"] .bg-slate-800 { background-color: var(--bg-tertiary) !important; }
[data-theme="light"] .bg-slate-700 { background-color: #d0d7de !important; }

[data-theme="light"] .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .text-slate-100 { color: var(--text-primary) !important; }
[data-theme="light"] .text-slate-200 { color: #1f2328 !important; }
[data-theme="light"] .text-slate-300 { color: var(--text-secondary) !important; }
[data-theme="light"] .text-slate-400 { color: var(--text-muted) !important; }
[data-theme="light"] .text-slate-500 { color: #6e7681 !important; }

[data-theme="light"] .border-slate-800 { border-color: var(--border) !important; }
[data-theme="light"] .border-slate-700 { border-color: var(--border) !important; }
[data-theme="light"] .border-slate-600 { border-color: var(--border-light) !important; }

[data-theme="light"] .hover\:text-white:hover { color: var(--text-primary) !important; }
[data-theme="light"] .hover\:text-blue-300:hover { color: var(--accent) !important; }
[data-theme="light"] .hover\:text-blue-400:hover { color: var(--accent) !important; }
[data-theme="light"] .hover\:bg-slate-700:hover { background-color: #d0d7de !important; }
[data-theme="light"] .hover\:bg-slate-800:hover { background-color: #d0d7de !important; }

/* Nav and backdrop */
[data-theme="light"] .bg-slate-950\/80 { background-color: var(--nav-bg) !important; }
[data-theme="light"] .bg-slate-900\/80 { background-color: var(--nav-bg) !important; }

/* Dropdown menu */
[data-theme="light"] .bg-blue-500 { background-color: var(--accent) !important; }

/* ============= THEME TOGGLE SWITCH ============= */
.theme-switch {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    user-select: none;
    padding: 0.25rem;
}

.theme-switch-label {
    font-size: 0.875rem;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.theme-switch-label.active {
    opacity: 1;
}

.theme-switch-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 9999px;
    transition: background 0.2s ease;
    border: 1px solid var(--border-light);
}

.theme-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

[data-theme="light"] .theme-switch-thumb {
    transform: translateX(16px);
}

/* ============= SHARED SITE NAV (all pages except homepage) ============= */
.site-nav {
    border-bottom: 1px solid var(--border);
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-nav .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    height: 64px;
}

.site-nav .nav-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.025em;
}

/* Unified nav action styles - matches the homepage's .btn-ghost +
   .btn-primary so the header looks identical across every page. */
.site-nav .nav-ghost,
.homepage-nav .btn-ghost {
    padding: 8px 14px;
    color: var(--text-secondary, var(--wf-text-mid));
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: color 150ms, background 150ms;
}
.site-nav .nav-ghost:hover,
.homepage-nav .btn-ghost:hover {
    color: var(--text-primary, var(--wf-text));
    background: var(--bg-tertiary, var(--wf-bg-tint));
}

.site-nav .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--brand);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.20);
    transition: transform 150ms, box-shadow 150ms, background 150ms;
}
.site-nav .nav-cta:hover {
    background: var(--brand-deep);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.25);
    color: #fff;
}
.site-nav .nav-logo .dot,
.homepage-nav .nav-logo .dot,
.footer-brand .dot {
    color: var(--brand);
    font-weight: 800;
    margin-left: 1px;
}

.site-nav .nav-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}


/* ============= SHARED SITE FOOTER ============= */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 2rem 0;
    margin-top: 3rem;
}

.site-footer .footer-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.site-footer .footer-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 24px;
    letter-spacing: -0.025em;
}

.site-footer .footer-tagline {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.site-footer .footer-heading {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wf-text-low, var(--text-muted));
    margin-bottom: 14px;
}
.site-footer .footer-brand .dot { color: var(--brand); font-weight: 800; margin-left: 1px; }
.site-footer .footer-tagline { margin-top: 8px; max-width: 240px; line-height: 1.55; }

.site-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.site-footer .footer-links a {
    display: inline-block;
    padding: 0.625rem 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    min-height: 44px;
    line-height: 1.4;
}

.site-footer .footer-links a:hover {
    color: var(--text-primary);
}

.site-footer .footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 24px;
    text-align: left;
    font-size: 13px;
    color: var(--wf-text-low, var(--text-muted));
}

@media (max-width: 768px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile header: drop the "Get started" CTA (keep the "Sign in" link, and the
   logged-in "Dashboard" link), matching the homepage's compact nav so the
   header doesn't overflow/wrap on phones. */
@media (max-width: 900px) {
    .site-nav .nav-cta[href="/signup"] { display: none; }
    .site-nav .nav-ghost { white-space: nowrap; }
    /* Tighten the nav gutter so the logo + actions stop crowding/overlapping
       on phones (was 32px each side = 64px lost on a 390px screen). */
    .site-nav .nav-inner { padding: 0 16px; }
    .site-nav .nav-actions { gap: 10px; }
}

/* Very narrow phones: shrink the wordmark and let the task-count truncate
   so nothing overlaps at ~360-390px. */
@media (max-width: 480px) {
    .site-nav .nav-logo { font-size: 20px; }
    .site-nav .nav-inner { padding: 0 12px; }
    #taskInfo { font-size: 0.8125rem; }
}