/* ===================================================================
 * WHOISDIG — Design System & Component Styles
 * ===================================================================
 * Organized: Base → Components → Light Mode Overrides
 * =================================================================== */

/* ===== Base ===== */
html {
    background: #080812;
    color-scheme: dark;
}
html.light {
    background: #f8fafc;
    color-scheme: light;
}

/* Ambient glow */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 50% at 20% 10%, rgba(139,92,246,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(236,72,153,0.06) 0%, transparent 70%);
}
html.light body::before {
    background:
        radial-gradient(ellipse 60% 50% at 20% 10%, rgba(139,92,246,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(236,72,153,0.03) 0%, transparent 70%);
}

/* ===== Component: Glass Surfaces ===== */
.glass {
    background: rgba(26, 27, 46, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.06);
}
html.light .glass {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ===== Component: Input Fields ===== */
.input-field {
    background: rgba(13, 14, 26, 0.6);
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input-field:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
    outline: none;
}
html.light .input-field {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1e293b;
}
html.light .input-field:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}
html.light .input-field::placeholder { color: #94a3b8; }

/* ===== Component: Card Expand/Collapse ===== */
.card-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s;
    opacity: 0;
}
.card-body.open {
    grid-template-rows: 1fr;
    opacity: 1;
}
.card-body > div { overflow: hidden; }

/* Summary row that collapses when card expands */
.summary-row {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                margin 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                gap 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s;
    overflow: hidden;
}
.summary-row.collapsed {
    grid-template-rows: 0fr;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.summary-row.collapsed > .collapse-col {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
}
.summary-row > .collapse-col {
    overflow: hidden;
    min-height: 0;
    transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Component: Primary Button ===== */
.btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    filter: brightness(1.08);
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Component: Skeleton Shimmer ===== */
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
    border-radius: 8px;
}
html.light .skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
}

/* ===== Component: Progress Bar ===== */
.progress-fill {
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Component: Scrollbar ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.5); }

/* ===== Component: Tab Pills ===== */
.tab-pill { transition: all 0.25s; }
.tab-pill.active {
    background: rgba(139,92,246,0.2);
    color: #fff;
    border-color: rgba(139,92,246,0.35);
}
html.light .tab-pill.active {
    background: rgba(139,92,246,0.12);
    color: #7c3aed;
}

/* ===== Component: Chevron ===== */
.chevron { transition: transform 0.25s; }
.chevron.open { transform: rotate(180deg); }

/* ===== Component: Badges ===== */
.badge-emerald { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.2); }
.badge-blue { background: rgba(59,130,246,0.12); color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }
.badge-red { background: rgba(244,63,94,0.12); color: #fb7185; border: 1px solid rgba(244,63,94,0.2); }
.badge-yellow { background: rgba(234,179,8,0.12); color: #facc15; border: 1px solid rgba(234,179,8,0.2); }
.badge-orange { background: rgba(249,115,22,0.12); color: #fb923c; border: 1px solid rgba(249,115,22,0.2); }
.badge-purple { background: rgba(168,85,247,0.12); color: #c084fc; border: 1px solid rgba(168,85,247,0.2); }
.badge-slate { background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2); }

html.light .badge-emerald { background: rgba(16,185,129,0.08); color: #059669; border-color: rgba(16,185,129,0.15); }
html.light .badge-blue { background: rgba(59,130,246,0.08); color: #2563eb; border-color: rgba(59,130,246,0.15); }
html.light .badge-red { background: rgba(244,63,94,0.08); color: #e11d48; border-color: rgba(244,63,94,0.15); }
html.light .badge-yellow { background: rgba(234,179,8,0.08); color: #ca8a04; border-color: rgba(234,179,8,0.15); }
html.light .badge-orange { background: rgba(249,115,22,0.08); color: #ea580c; border-color: rgba(249,115,22,0.15); }

/* ===================================================================
 * LIGHT MODE — Refined, Muted, Premium Palette
 * Inspiration: Linear, Notion, Vercel — soft contrast, warm grays
 * =================================================================== */

/* Global text — warm dark gray instead of harsh black */
html.light body { color: #475569; }

/* Headings — deep slate, not pure black */
html.light .text-white { color: #334155 !important; }

/* Slate tones — gentle hierarchy */
html.light .text-slate-200 { color: #475569 !important; }
html.light .text-slate-300 { color: #64748b !important; }
html.light .text-slate-400 { color: #94a3b8 !important; }
html.light .text-slate-500 { color: #94a3b8 !important; }
html.light .text-slate-600 { color: #b0b8c7 !important; }

/* Accent colors — muted, not screaming */
html.light .text-accent { color: #8b7cf6 !important; }
html.light .text-pink-400 { color: #e88db5 !important; }
html.light .text-purple-300 { color: #9b8afb !important; }
html.light .text-blue-400 { color: #6a9cf7 !important; }
html.light .text-emerald-400 { color: #5cb89c !important; }
html.light .text-rose-400 { color: #e8849a !important; }
html.light .text-orange-400 { color: #e8976a !important; }

/* Card inner surfaces — barely-there tints */
html.light .bg-black\/15,
html.light .bg-black\/20,
html.light .bg-black\/30,
html.light .bg-black\/40 {
    background: rgba(100, 116, 139, 0.04) !important;
}
html.light .border-white\/5,
html.light .border-white\/6 {
    border-color: rgba(148, 163, 184, 0.15) !important;
}
html.light .border-white\/10 {
    border-color: rgba(148, 163, 184, 0.18) !important;
}

/* Font mono values inside cards */
html.light .font-mono.text-slate-300,
html.light .font-mono.text-slate-400 { color: #64748b !important; }

/* Tab pills */
html.light .tab-pill:not(.active) { color: #94a3b8; }
html.light .tab-pill:not(.active):hover { color: #64748b; }
html.light .tab-pill.active {
    background: rgba(139,92,246,0.08) !important;
    color: #8b7cf6 !important;
}

/* Theme toggle */
html.light #btn-theme { color: #94a3b8; }
html.light #btn-theme:hover { color: #64748b; }

/* Filter bar */
html.light .filter-btn:not(.active) { color: #94a3b8; border-color: #e2e8f0; }
html.light .filter-btn:not(.active):hover { border-color: #cbd5e1; color: #64748b; }

/* Dig type buttons */
html.light .dig-type-btn:not(.active) { color: #94a3b8; border-color: #e2e8f0; }
html.light .dig-type-btn.active { background: rgba(139,92,246,0.06); color: #8b7cf6; border-color: rgba(139,92,246,0.18); }

/* Progress bar track */
html.light .bg-white\/5 { background: rgba(100,116,139,0.06) !important; }

/* Footer — very light */
html.light footer { border-color: #f1f5f9 !important; }
html.light footer .text-slate-600 { color: #cbd5e1 !important; }
html.light footer .text-slate-400 { color: #94a3b8 !important; }

/* Empty state */
html.light #empty-state .text-slate-500 { color: #b0b8c7 !important; }
html.light #empty-state .text-slate-600 { color: #cbd5e1 !important; }
html.light #empty-state .bg-white\/5 { background: #f8fafc !important; }
html.light #empty-state i { color: #d1d5db !important; }

/* Card hover — subtle purple glow */
html.light .result-card:hover { border-color: rgba(139,92,246,0.12) !important; }

/* Chevron */
html.light .chevron { color: #cbd5e1 !important; }

/* Raw WHOIS output — soft green on very light gray */
html.light pre.text-emerald-400\/80 { color: #5cb89c !important; background: #f8fafc !important; border-color: #f1f5f9 !important; }

/* Action buttons */
html.light .bg-white\/5 { background: rgba(100,116,139,0.05) !important; }
html.light .hover\:bg-white\/10:hover { background: rgba(100,116,139,0.08) !important; }

/* Error card — softer red */
html.light .border-l-rose-500\/60 { border-left-color: #f0a0b2 !important; }
html.light .bg-rose-500\/10 { background: rgba(244,114,142,0.06) !important; }
html.light .text-rose-400\/80 { color: #e88898 !important; }

/* NS & status pills */
html.light .bg-white\/5.text-slate-300,
html.light .bg-white\/5.text-slate-400 {
    background: #f8fafc !important;
    color: #64748b !important;
    border-color: #f1f5f9 !important;
}

/* Smart Input badge */
html.light .bg-accent\/10 { background: rgba(139,92,246,0.05) !important; }
html.light .border-accent\/20 { border-color: rgba(139,92,246,0.1) !important; }

/* Toast */
html.light .bg-accent { background: #8b7cf6 !important; }

/* Primary button — text stays white on purple gradient */
html.light .btn-primary { color: #fff !important; }

/* Logo icon — stays white on gradient background */
html.light #app-header .from-accent i { color: #fff !important; }

/* Badges — pastel, not saturated */
html.light .badge-emerald { background: rgba(92,184,156,0.08); color: #5cb89c; border-color: rgba(92,184,156,0.15); }
html.light .badge-blue { background: rgba(106,156,247,0.08); color: #6a9cf7; border-color: rgba(106,156,247,0.15); }
html.light .badge-red { background: rgba(232,132,154,0.08); color: #e8849a; border-color: rgba(232,132,154,0.15); }
html.light .badge-yellow { background: rgba(210,170,70,0.08); color: #c4a43e; border-color: rgba(210,170,70,0.12); }
html.light .badge-orange { background: rgba(232,151,106,0.08); color: #d8874a; border-color: rgba(232,151,106,0.12); }