/* ================================================================
   Closyr – Shared styles across all pages
   ================================================================ */

/* ── Design tokens (dark theme default) ── */
:root {
    /* Brand */
    --brand:              #f59e0b;
    --brand-light:        #fbbf24;

    /* Surfaces — layered from deepest to most elevated */
    --bg-base:            #0c0d1a;
    --bg-surface:         rgba(255, 255, 255, 0.02);
    --bg-elevated:        rgba(255, 255, 255, 0.03);
    --bg-hover:           rgba(255, 255, 255, 0.05);
    --bg-recessed:        #131525;            /* selects, code blocks */
    --bg-input:           rgba(255, 255, 255, 0.05);

    /* Borders */
    --border:             rgba(255, 255, 255, 0.05);
    --border-subtle:      rgba(255, 255, 255, 0.03);
    --border-strong:      rgba(255, 255, 255, 0.06);
    --border-hover:       rgba(255, 255, 255, 0.09);

    /* Text */
    --text-heading:       #e5e7eb;
    --text-primary:       #e5e7eb;
    --text-secondary:     #9ca3af;
    --text-muted:         #6b7280;
    --text-faint:         #4b5563;
    --text-input:         #e5e7eb;

    /* Score cards */
    --score-bg:           rgba(255, 255, 255, 0.03);
    --score-border:       rgba(255, 255, 255, 0.05);
    --score-bg-hover:     rgba(255, 255, 255, 0.05);
    --score-border-hover: rgba(255, 255, 255, 0.09);
    --score-value:        #e5e7eb;
    --score-primary-value:#fbbf24;
    --score-primary-bg:   linear-gradient(135deg, rgba(251,191,36,0.08), rgba(251,191,36,0.02));
    --score-primary-border: rgba(251,191,36,0.15);

    /* Formula display */
    --formula-bg:         linear-gradient(135deg, rgba(16,185,129,0.06), rgba(52,211,153,0.03));
    --formula-border:     rgba(16,185,129,0.12);

    /* Progress */
    --progress-track:     rgba(255, 255, 255, 0.06);
    --progress-fill:      linear-gradient(90deg, var(--brand), var(--brand-light));

    /* Scrollbar */
    --scrollbar-thumb:       rgba(255,255,255,0.07);
    --scrollbar-thumb-hover: rgba(255,255,255,0.14);

    /* Dividers */
    --divider:            linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);

    /* Nav */
    --nav-bg:             rgba(12,13,26,0.85);
}

/* ── Light theme token overrides ── */
html[data-theme="light"] {
    --bg-base:            #f0f1f3;
    --bg-surface:         #f7f7f8;
    --bg-elevated:        #eeeff1;
    --bg-hover:           rgba(0, 0, 0, 0.03);
    --bg-recessed:        #e8e9ec;
    --bg-input:           #f7f7f8;

    --border:             #dcdee2;
    --border-subtle:      #dcdee2;
    --border-strong:      #dcdee2;
    --border-hover:       #c5c7cc;

    --text-heading:       #111827;
    --text-primary:       #374151;
    --text-secondary:     #6b7280;
    --text-muted:         #9ca3af;
    --text-faint:         #4b5563;
    --text-input:         #1f2937;

    --score-bg:           #eeeff1;
    --score-border:       #dcdee2;
    --score-bg-hover:     #e5e6e9;
    --score-border-hover: #c5c7cc;
    --score-value:        #374151;
    --score-primary-value:#b45309;
    --score-primary-bg:   linear-gradient(135deg, rgba(251,191,36,0.08), rgba(251,191,36,0.02));
    --score-primary-border: rgba(217,119,6,0.2);

    --formula-bg:         linear-gradient(135deg, rgba(5,150,105,0.04), rgba(16,185,129,0.02));
    --formula-border:     rgba(5,150,105,0.12);

    --progress-track:     #dcdee2;

    --scrollbar-thumb:       rgba(0,0,0,0.15);
    --scrollbar-thumb-hover: rgba(0,0,0,0.25);

    --divider:            linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);

    --nav-bg:             rgba(240,241,243,0.9);
}


/* ── Base typography ── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.font-mono, code, pre, .formula-display {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
    font-feature-settings: 'liga' 1;
}

/* ── Gradient brand text ── */
.gradient-text {
    background: linear-gradient(135deg, var(--brand-light), var(--brand), var(--brand-light));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s ease-in-out infinite;
}
@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ── Scrollbar ── */
html { overflow-y: scroll; scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ── Focus rings ── */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25), 0 0 16px -4px rgba(251, 191, 36, 0.15);
}

/* ── Native selects ── */
select, select option {
    background-color: var(--bg-recessed);
    color: var(--text-primary);
}

/* ── Formula display ── */
.formula-display {
    background: var(--formula-bg);
    border: 1px solid var(--formula-border);
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    overflow-x: auto;
}

/* ── Score cards ── */
.score-card {
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    background: var(--score-bg);
    border: 1px solid var(--score-border);
    transition: background 0.2s, border-color 0.2s;
}
.score-card:hover {
    background: var(--score-bg-hover);
    border-color: var(--score-border-hover);
}
.score-card-primary {
    background: var(--score-primary-bg);
    border: 1px solid var(--score-primary-border);
}
.score-card-primary:hover {
    background: var(--score-primary-bg);
    border-color: var(--score-primary-border);
    filter: brightness(1.15);
}
.score-card-label { font-size: 0.6875rem; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.025em; }
.score-card-value { font-size: 0.9375rem; font-weight: 600; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
.score-card-value-primary { color: var(--score-primary-value); }
.score-card-value-secondary { color: var(--score-value); }

/* ── Metrics grid ── */
.metrics-grid {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-surface);
    border-radius: 0.75rem;
    border: 1px solid var(--border-subtle);
}

/* ── Tables ── */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
thead th {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-strong);
}
tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: var(--bg-hover); }
tbody tr:last-child td { border-bottom: none; }

/* ── Progress bar ── */
.progress-track {
    height: 0.375rem;
    background: var(--progress-track);
    border-radius: 9999px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--progress-fill);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    animation: progress-shimmer 2s ease-in-out infinite;
}
@keyframes progress-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── Panel surface ── */
.panel-surface {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

/* ── Complexity badge ── */
.complexity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.complexity-badge-value {
    color: var(--text-heading);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Formula auto-size for long expressions ── */
.formula-text-auto {
    font-size: clamp(0.75rem, 2.5vw, 1.125rem);
    line-height: 1.6;
}

/* ── Section dividers ── */
.section-divider {
    height: 1px;
    background: var(--divider);
    margin: 1rem 0;
}


/* ================================================================
   Light theme — Tailwind utility class overrides
   (These override third-party classes and must stay as literals.)
   ================================================================ */

/* ── Base ── */
html[data-theme="light"] body       { background: var(--bg-base) !important; color: var(--text-primary) !important; }
html[data-theme="light"] nav        { background: var(--nav-bg) !important; }

/* ── Headings & text ── */
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3,
html[data-theme="light"] .text-white { color: var(--text-heading) !important; }
html[data-theme="light"] .text-gray-100, html[data-theme="light"] .text-gray-300 { color: var(--text-primary) !important; }
html[data-theme="light"] .text-gray-400, html[data-theme="light"] .text-gray-500 { color: var(--text-secondary) !important; }
html[data-theme="light"] .text-gray-600 { color: var(--text-muted) !important; }

/* ── Backgrounds ── */
html[data-theme="light"] .bg-gray-950            { background: var(--bg-base) !important; }
html[data-theme="light"] [class*="bg-gray-900"]  { background: var(--bg-recessed) !important; }
html[data-theme="light"] [class*="bg-gray-800"]  { background: var(--bg-recessed) !important; }
html[data-theme="light"] [class*="bg-gray-700"]  { background: #dfe0e4 !important; }
html[data-theme="light"] .bg-gray-600            { background: #d1d2d6 !important; }
html[data-theme="light"] [class*="bg-[#0c0d1a]"]{ background: var(--bg-base) !important; border-color: var(--border) !important; }
html[data-theme="light"] [class*="bg-[#0a0b17]"]{ background: var(--bg-surface) !important; border-color: var(--border) !important; }
html[data-theme="light"] [class*="bg-[#131525]"] { background: var(--bg-recessed) !important; }

/* ── Borders ── */
html[data-theme="light"] [class*="border-white/"] { border-color: var(--border) !important; }

/* ── Panels & cards ── */
html[data-theme="light"] .panel-surface { box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; }
html[data-theme="light"] [class*="rounded"][class*="bg-white/"]:not(nav a):not(nav button) { background: var(--bg-surface) !important; outline: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
html[data-theme="light"] [class*="rounded"][class*="bg-white/"][class*="border"] { box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; }
html[data-theme="light"] [class*="bg-white/"][class*="tab"] { background: transparent !important; outline: none; }
html[data-theme="light"] tr[class*="hover:bg-white"] { background: transparent !important; }
html[data-theme="light"] tr[class*="hover:bg-white"]:hover { background: var(--bg-hover) !important; }

/* ── Forms ── */
html[data-theme="light"] select, html[data-theme="light"] select option { background: var(--bg-input) !important; color: var(--text-input) !important; }
html[data-theme="light"] input, html[data-theme="light"] textarea { color: var(--text-input) !important; background: var(--bg-input) !important; border-color: #d1d3d7 !important; }
html[data-theme="light"] pre  { background: var(--bg-recessed) !important; }
html[data-theme="light"] code { color: var(--text-primary) !important; }

/* ── Tables ── */
html[data-theme="light"] table { border-color: var(--border) !important; }
html[data-theme="light"] thead { background: var(--bg-recessed) !important; }
html[data-theme="light"] th    { color: var(--text-faint) !important; border-color: var(--border) !important; }
html[data-theme="light"] td    { border-color: var(--bg-recessed) !important; }
html[data-theme="light"] tr:hover { background: rgba(0,0,0,0.02) !important; }

/* ── Footer ── */
html[data-theme="light"] footer   { border-color: var(--border) !important; }
html[data-theme="light"] footer * { color: var(--text-muted) !important; }

/* ── Scrollbar ── */
html[data-theme="light"] ::-webkit-scrollbar-thumb       { background: var(--scrollbar-thumb) !important; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover  { background: var(--scrollbar-thumb-hover) !important; }

/* ── Colored text — darken for readability ── */
html[data-theme="light"] .text-amber-300   { color: #b45309 !important; }
html[data-theme="light"] .text-amber-400   { color: #b45309 !important; }
html[data-theme="light"] .text-yellow-300  { color: #a16207 !important; }
html[data-theme="light"] .text-yellow-400  { color: #a16207 !important; }
html[data-theme="light"] [class*="text-yellow-500"] { color: #a16207 !important; }
html[data-theme="light"] .text-cyan-400    { color: #0e7490 !important; }
html[data-theme="light"] [class*="text-cyan-400"]   { color: #0e7490 !important; }
html[data-theme="light"] .text-orange-400  { color: #c2410c !important; }
html[data-theme="light"] .text-emerald-300 { color: #047857 !important; }
html[data-theme="light"] .text-emerald-400 { color: #047857 !important; }
html[data-theme="light"] .text-green-400   { color: #15803d !important; }
html[data-theme="light"] .text-indigo-300  { color: #4338ca !important; }
html[data-theme="light"] .text-red-400     { color: #b91c1c !important; }
html[data-theme="light"] .text-teal-300    { color: #0f766e !important; }

/* ── Pill badges ── */
html[data-theme="light"] .rounded-full[class*="bg-green-500"]   { background: rgba(34,197,94,0.12) !important;  border-color: rgba(22,163,74,0.35) !important; }
html[data-theme="light"] .rounded-full[class*="bg-amber-500"]   { background: rgba(245,158,11,0.12) !important; border-color: rgba(217,119,6,0.35) !important; }
html[data-theme="light"] .rounded-full[class*="bg-yellow-500"]  { background: rgba(234,179,8,0.12) !important;  border-color: rgba(161,98,7,0.35) !important; }
html[data-theme="light"] .rounded-full[class*="bg-orange-500"]  { background: rgba(249,115,22,0.12) !important; border-color: rgba(194,65,12,0.35) !important; }
html[data-theme="light"] .rounded-full[class*="bg-cyan-500"]    { background: rgba(6,182,212,0.12) !important;  border-color: rgba(14,116,144,0.35) !important; }
html[data-theme="light"] .rounded-full[class*="bg-indigo-500"]  { background: rgba(99,102,241,0.12) !important; border-color: rgba(67,56,202,0.35) !important; }
html[data-theme="light"] .rounded-full[class*="bg-emerald-500"] { background: rgba(16,185,129,0.12) !important; border-color: rgba(4,120,87,0.35) !important; }
html[data-theme="light"] .rounded-full[class*="bg-gray-500"]    { background: rgba(107,114,128,0.1) !important; border-color: rgba(107,114,128,0.3) !important; }
html[data-theme="light"] .rounded-full[class*="bg-teal-500"]    { background: rgba(20,184,166,0.12) !important; border-color: rgba(15,118,110,0.35) !important; }
html[data-theme="light"] .rounded-full[class*="bg-red-500"]     { background: rgba(239,68,68,0.12) !important;  border-color: rgba(185,28,28,0.35) !important; }
html[data-theme="light"] .rounded-full[class*="bg-white"]:not(.toggle-knob) { background: rgba(107,114,128,0.08) !important;border-color: rgba(107,114,128,0.25) !important; }

/* ── Preserve white text on colored buttons ── */
html[data-theme="light"] [class*="bg-gradient"]  { color: #fff !important; }
html[data-theme="light"] [class*="bg-gradient"] *{ color: #fff !important; }
html[data-theme="light"] [class*="bg-amber-6"]   { color: #fff !important; }
html[data-theme="light"] [class*="bg-amber-6"] * { color: #fff !important; }
html[data-theme="light"] [class*="bg-red-6"]     { color: #fff !important; }
html[data-theme="light"] [class*="bg-red-6"] *   { color: #fff !important; }
html[data-theme="light"] [class*="bg-yellow-6"]  { color: #fff !important; }
html[data-theme="light"] [class*="bg-yellow-6"] *{ color: #fff !important; }
html[data-theme="light"] [class*="bg-green-6"]   { color: #fff !important; }
html[data-theme="light"] [class*="bg-green-6"] * { color: #fff !important; }
html[data-theme="light"] [class*="bg-emerald-6"] { color: #fff !important; }
html[data-theme="light"] [class*="bg-emerald-6"]*{ color: #fff !important; }
html[data-theme="light"] [class*="bg-orange-6"]  { color: #fff !important; }
html[data-theme="light"] [class*="bg-orange-6"] *{ color: #fff !important; }

/* ── Range sliders ── */
html[data-theme="light"] input[type="range"] { accent-color: #d97706; background: transparent !important; outline: none !important; border: none !important; box-shadow: none !important; }
html[data-theme="light"] input[type="range"]::-webkit-slider-runnable-track { background: #d1d3d7 !important; border-radius: 9999px; height: 6px; }
html[data-theme="light"] input[type="range"]::-moz-range-track { background: #d1d3d7 !important; border-radius: 9999px; height: 6px; }
html[data-theme="light"] input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #d97706; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.25); margin-top: -6px; cursor: pointer; }
html[data-theme="light"] input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #d97706; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.25); cursor: pointer; }

/* ── Score boxes (legacy Tailwind class names) ── */
html[data-theme="light"] [class*="bg-amber-900"]    { background: rgba(251,191,36,0.12) !important; border-color: rgba(217,119,6,0.25) !important; }
html[data-theme="light"] [class*="border-amber-500"]{ border-color: rgba(217,119,6,0.3) !important; }