/* ============================================================
   AURORA GLASS skin — part 2: glass surfaces, components, type
   (loaded after aurora.css)
   ============================================================ */

/* ---- Glass surfaces ---- */
:root[data-skin="aurora"] .card,
:root[data-skin="aurora"] .premium-card,
:root[data-skin="aurora"] .modal {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
:root[data-skin="aurora"] .sidebar,
:root[data-skin="aurora"] .topbar,
:root[data-skin="aurora"] .seo-nav {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-color: var(--line);
}
:root[data-skin="aurora"] .stat,
:root[data-skin="aurora"] .text-input,
:root[data-skin="aurora"] .seg,
:root[data-skin="aurora"] .icon-btn,
:root[data-skin="aurora"] .btn-ghost,
:root[data-skin="aurora"] .partner-card,
:root[data-skin="aurora"] .checkout-summary {
  background: var(--glass-2);
  border: 1px solid var(--line);
}
:root[data-skin="aurora"] .text-input:hover { border-color: var(--line-2); background: var(--glass-hi); }
:root[data-skin="aurora"] .text-input:focus {
  background: var(--glass-hi); border-color: var(--c-overpay); box-shadow: var(--ring);
}
:root[data-skin="aurora"] .seg button.on {
  background: var(--glass-hi); color: var(--ink-0);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
:root[data-skin="aurora"] .nav-item.active {
  background: var(--glass-hi); color: var(--ink-0);
  box-shadow: inset 0 0 0 1px var(--c-overpay);
}
:root[data-skin="aurora"] .nav-item:hover { background: var(--glass-2); }
:root[data-skin="aurora"] .stat,
:root[data-skin="aurora"] .partner-card,
:root[data-skin="aurora"] .disclaimer,
:root[data-skin="aurora"] .ad-slot,
:root[data-skin="aurora"] .checkout-summary { border-radius: var(--r-md); }
:root[data-skin="aurora"] .disclaimer { background: var(--glass-2); border-style: solid; border-color: var(--line); }
:root[data-skin="aurora"] .ad-slot { background: var(--glass); border-color: var(--line-2); }
:root[data-skin="aurora"] .partner-logo {
  background-image: repeating-linear-gradient(135deg, var(--glass-hi) 0 6px, var(--glass) 6px 12px);
  border-color: var(--line);
}

/* ---- Brand mark: aurora gradient ---- */
:root[data-skin="aurora"] .brand-mark {
  background:
    radial-gradient(circle at 30% 30%, oklch(0.85 0.18 295), transparent 60%),
    radial-gradient(circle at 70% 70%, oklch(0.85 0.18 195), transparent 60%),
    linear-gradient(135deg, oklch(0.4 0.15 295), oklch(0.4 0.15 195));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 6px 20px -8px oklch(0.6 0.2 295);
  color: transparent;
}

/* ---- Primary button: violet→teal gradient ---- */
:root[data-skin="aurora"] .btn-primary {
  background: linear-gradient(135deg, oklch(0.55 0.22 295), oklch(0.55 0.22 195));
  border: 1px solid transparent; color: #fff;
  box-shadow: 0 8px 24px -10px oklch(0.55 0.22 295);
}
:root[data-skin="aurora"] .btn-primary:hover { filter: brightness(1.1); }
:root[data-skin="aurora"] .btn-ghost:hover { background: var(--glass-hi); color: var(--ink-0); }

/* ---- Slider: gradient thumb ---- */
:root[data-skin="aurora"] input[type="range"].rng { background: var(--line-2); height: 4px; }
:root[data-skin="aurora"] input[type="range"].rng::-webkit-slider-thumb {
  background: linear-gradient(135deg, oklch(0.85 0.18 295), oklch(0.85 0.18 195));
  border: none; box-shadow: 0 0 0 4px rgba(255,255,255,0.06), 0 4px 12px -2px oklch(0.55 0.22 295);
}
:root[data-skin="aurora"] input[type="range"].rng::-moz-range-thumb {
  background: oklch(0.8 0.18 250); border: none;
}
:root[data-skin="aurora"] .slider-val { color: var(--c-overpay); }

/* ---- Hero: aurora gradient glass, leads with the verdict ---- */
:root[data-skin="aurora"] .hero-result {
  background: linear-gradient(135deg, oklch(0.55 0.22 295 / 0.9), oklch(0.55 0.22 195 / 0.85));
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 16px 50px -18px oklch(0.55 0.22 280), inset 0 1px 0 rgba(255,255,255,0.2);
  color: #fff;
}

/* ---- Pills / accents ---- */
:root[data-skin="aurora"] .pill.pos { background: var(--pos-soft); color: var(--c-good); }
:root[data-skin="aurora"] .pill.neg { background: var(--neg-soft); color: var(--c-warn); }
:root[data-skin="aurora"] .pill.warn { background: var(--warn-soft); color: var(--c-lump); }
:root[data-skin="aurora"] .stat .s-value { color: var(--ink-0); }
:root[data-skin="aurora"] .premium-card { border-color: var(--c-overpay); box-shadow: 0 0 0 1px var(--c-overpay), var(--shadow-card); }

/* ===========================================================
   Typography — Geist display + Geist Mono numerals
   =========================================================== */
:root[data-skin="aurora"] .page-head h1 {
  font-weight: 600; font-size: 32px;
  letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance;
}
:root[data-skin="aurora"] .seo-section h2,
:root[data-skin="aurora"] .cta-band h2,
:root[data-skin="aurora"] .hero-seo h1 {
  font-weight: 500; letter-spacing: -0.03em;
}
:root[data-skin="aurora"] .hero-seo h1 { letter-spacing: -0.04em; }

/* numerals → mono, tabular, tight */
:root[data-skin="aurora"] .hr-value,
:root[data-skin="aurora"] .s-value,
:root[data-skin="aurora"] .brk-v,
:root[data-skin="aurora"] .slider-val,
:root[data-skin="aurora"] .preset-mo,
:root[data-skin="aurora"] .hero-figure,
:root[data-skin="aurora"] .premium-price,
:root[data-skin="aurora"] .text-input {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
:root[data-skin="aurora"] .hr-value { font-weight: 500; }

/* labels — uppercase tracked */
:root[data-skin="aurora"] .s-label,
:root[data-skin="aurora"] .ad-label,
:root[data-skin="aurora"] .hr-label { text-transform: uppercase; letter-spacing: 0.08em; }

/* gradient-text accent for the brand wordmark */
:root[data-skin="aurora"] .brand-name {
  font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
}

/* scrollbar */
:root[data-skin="aurora"] ::-webkit-scrollbar-thumb { background: var(--line-2); border-color: transparent; }

/* explorations / canvas frames stay glassy */
:root[data-skin="aurora"] .design-canvas { background: transparent !important; }