/* ============================================================
   NEXUS THEME — nexus-theme.css
   Shared CSS custom properties, theme switching, and common
   utility classes used across all pages.
   ============================================================ */

/* ── Dark Theme (Default) ── */
:root {
    --bg:             #111010;
    --bg-alt:         #171413;
    --surface:        #1C1917;
    --surface-light:  #242120;
    --text-main:      #F5F0EB;
    --text-muted:     #8C8279;
    --secondary:      #A78BFA;
    --border:         rgba(255,255,255,0.07);
    --border-subtle:  rgba(255,255,255,0.05);
    --input-bg:       rgba(255,255,255,0.03);
    --input-border:   rgba(255,255,255,0.10);
    --input-bg-focus: rgba(255,255,255,0.05);
    --card-shadow:    none;
    --card-shadow-lg: none;
    --code-bg:        #1A1714;
    --code-text:      #D4CFCA;
    --code-border:    rgba(255,255,255,0.06);

    /* Alert / status colors (dark theme) */
    --success-bg:          rgba(74,222,128,0.10);
    --success-border:      rgba(74,222,128,0.25);
    --success-text:        #4ADE80;
    --success-icon:        #4ADE80;

    --error-bg:            rgba(248,113,113,0.10);
    --error-border:        rgba(248,113,113,0.25);
    --error-text:          #F87171;
    --error-icon:          #F87171;

    --warning-bg:          rgba(245,158,11,0.10);
    --warning-border:      rgba(245,158,11,0.30);
    --warning-text:        #FDE68A;
    --warning-text-strong: #FBBF24;
    --warning-icon:        #FBBF24;

    --info-bg:             rgba(249,115,22,0.10);
    --info-border:         rgba(249,115,22,0.25);
    --info-text:           #FB923C;
    --info-icon:           #F97316;

    --loading-bg:          var(--surface);
    --loading-border:      var(--border);
    --loading-text:        var(--text-muted);
}

/* ── Light Theme ── */
html[data-theme="light"] {
    --bg:             #ECE7DF;
    --bg-alt:         #E4DDD5;
    --surface:        #F7F2EC;
    --surface-light:  #ECE7DF;
    --text-main:      #1C1917;
    --text-muted:     #78716C;
    --secondary:      #7C3AED;
    --border:         rgba(0,0,0,0.10);
    --border-subtle:  rgba(0,0,0,0.06);
    --input-bg:       rgba(0,0,0,0.04);
    --input-border:   rgba(0,0,0,0.13);
    --input-bg-focus: rgba(0,0,0,0.06);
    --card-shadow:    0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    --card-shadow-lg: 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
    --code-bg:        #1E1B18;
    --code-text:      #D4CFCA;
    --code-border:    rgba(0,0,0,0.15);

    /* Alert / status colors (light theme) */
    --success-bg:          rgba(22,163,74,0.08);
    --success-border:      rgba(22,163,74,0.25);
    --success-text:        #15803D;
    --success-icon:        #16A34A;

    --error-bg:            rgba(220,38,38,0.08);
    --error-border:        rgba(220,38,38,0.25);
    --error-text:          #DC2626;
    --error-icon:          #DC2626;

    --warning-bg:          rgba(245,158,11,0.08);
    --warning-border:      rgba(245,158,11,0.25);
    --warning-text:        #92400E;
    --warning-text-strong: #B45309;
    --warning-icon:        #D97706;

    --info-bg:             rgba(249,115,22,0.08);
    --info-border:         rgba(249,115,22,0.25);
    --info-text:           #C2410C;
    --info-icon:           #EA580C;

    --loading-bg:          var(--surface);
    --loading-border:      var(--border);
    --loading-text:        var(--text-muted);
}

/* ── Global Theme Transitions ── */
*, *::before, *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Body Base ── */
body {
    background-color: var(--bg);
    color: var(--text-main);
    -webkit-tap-highlight-color: transparent;
}

/* ── Topographic Contour Background Texture ──
     Paths use seamless-tile pattern: M0,Y Q_,_ 200,Y T400,Y T600,Y T800,Y
     so every line starts and ends at the same Y, creating unbroken
     contours that flow left-to-right across tile boundaries.          */
.bg-texture {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Cpath d='M0,50 Q100,28 200,50 T400,50 T600,50 T800,50' fill='none' stroke='rgba(255,255,255,0.014)' stroke-width='1'/%3E%3Cpath d='M0,100 Q100,72 200,100 T400,100 T600,100 T800,100' fill='none' stroke='rgba(255,255,255,0.018)' stroke-width='1'/%3E%3Cpath d='M0,155 Q120,125 200,155 T400,155 T600,155 T800,155' fill='none' stroke='rgba(255,255,255,0.016)' stroke-width='1'/%3E%3Cpath d='M0,200 Q90,168 200,200 T400,200 T600,200 T800,200' fill='none' stroke='rgba(255,255,255,0.020)' stroke-width='1'/%3E%3Cpath d='M0,250 Q110,218 200,250 T400,250 T600,250 T800,250' fill='none' stroke='rgba(255,255,255,0.015)' stroke-width='1'/%3E%3Cpath d='M0,295 Q80,262 200,295 T400,295 T600,295 T800,295' fill='none' stroke='rgba(255,255,255,0.018)' stroke-width='1'/%3E%3Cpath d='M0,340 Q130,308 200,340 T400,340 T600,340 T800,340' fill='none' stroke='rgba(255,255,255,0.014)' stroke-width='1'/%3E%3Cpath d='M0,390 Q100,355 200,390 T400,390 T600,390 T800,390' fill='none' stroke='rgba(255,255,255,0.018)' stroke-width='1'/%3E%3Cpath d='M0,440 Q120,410 200,440 T400,440 T600,440 T800,440' fill='none' stroke='rgba(255,255,255,0.015)' stroke-width='1'/%3E%3Cpath d='M0,490 Q90,458 200,490 T400,490 T600,490 T800,490' fill='none' stroke='rgba(255,255,255,0.018)' stroke-width='1'/%3E%3Cpath d='M0,540 Q110,512 200,540 T400,540 T600,540 T800,540' fill='none' stroke='rgba(255,255,255,0.014)' stroke-width='1'/%3E%3Cpath d='M0,580 Q80,558 200,580 T400,580 T600,580 T800,580' fill='none' stroke='rgba(255,255,255,0.012)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 800px 600px;
}
html[data-theme="light"] .bg-texture {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Cpath d='M0,50 Q100,28 200,50 T400,50 T600,50 T800,50' fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='1'/%3E%3Cpath d='M0,100 Q100,72 200,100 T400,100 T600,100 T800,100' fill='none' stroke='rgba(0,0,0,0.06)' stroke-width='1'/%3E%3Cpath d='M0,155 Q120,125 200,155 T400,155 T600,155 T800,155' fill='none' stroke='rgba(0,0,0,0.055)' stroke-width='1'/%3E%3Cpath d='M0,200 Q90,168 200,200 T400,200 T600,200 T800,200' fill='none' stroke='rgba(0,0,0,0.065)' stroke-width='1'/%3E%3Cpath d='M0,250 Q110,218 200,250 T400,250 T600,250 T800,250' fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='1'/%3E%3Cpath d='M0,295 Q80,262 200,295 T400,295 T600,295 T800,295' fill='none' stroke='rgba(0,0,0,0.06)' stroke-width='1'/%3E%3Cpath d='M0,340 Q130,308 200,340 T400,340 T600,340 T800,340' fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='1'/%3E%3Cpath d='M0,390 Q100,355 200,390 T400,390 T600,390 T800,390' fill='none' stroke='rgba(0,0,0,0.06)' stroke-width='1'/%3E%3Cpath d='M0,440 Q120,410 200,440 T400,440 T600,440 T800,440' fill='none' stroke='rgba(0,0,0,0.055)' stroke-width='1'/%3E%3Cpath d='M0,490 Q90,458 200,490 T400,490 T600,490 T800,490' fill='none' stroke='rgba(0,0,0,0.06)' stroke-width='1'/%3E%3Cpath d='M0,540 Q110,512 200,540 T400,540 T600,540 T800,540' fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='1'/%3E%3Cpath d='M0,580 Q80,558 200,580 T400,580 T600,580 T800,580' fill='none' stroke='rgba(0,0,0,0.045)' stroke-width='1'/%3E%3C/svg%3E");
}

/* ── Squish Button Animation ── */
.squish { transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.squish:active { transform: scale(0.95); }

/* ── Light Mode: Tailwind white-alpha utility overrides ── */
html[data-theme="light"] .bg-white\/5         { background-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .bg-white\/10        { background-color: rgba(0,0,0,0.07) !important; }
html[data-theme="light"] .bg-white\/20        { background-color: rgba(0,0,0,0.12) !important; }
html[data-theme="light"] .hover\:bg-white\/5:hover  { background-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.07) !important; }
html[data-theme="light"] .border-white\/5     { border-color: rgba(0,0,0,0.05) !important; }
html[data-theme="light"] .border-white\/10    { border-color: rgba(0,0,0,0.10) !important; }

/* ── Light Mode: Shadow depth adjustments ── */
html[data-theme="light"] .shadow-soft  { box-shadow: 0 2px 12px -2px rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .shadow-float { box-shadow: 0 4px 20px -4px rgba(0,0,0,0.10) !important; }

/* ── Toast Notifications ── */
.toast {
    position: fixed;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 100;
    pointer-events: none;
}
@media (min-width: 768px) { .toast { bottom: 2rem; } }
.toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}