/*
# Path: /styles.css
# Purpose: High-fidelity dark theme shared across the site (buttons-only home for now).
# Exports: Global CSS variables and components (.home, .grid, .calc-btn).
# Dependencies: None (no fonts/CDNs; system font stack only).
# Tech Stack: CSS3
# Feeds Into: /index.html (and future calculator pages)
# Notes: Accessible contrast, strong focus states, reduced-motion support, responsive grid.
*/

:root {
  /* Core palette */
  --bg-0: #0b0f14;
  --bg-1: #0e141b;
  --surface: #121a23;
  --text: #e6edf3;
  --text-dim: #a9b7c6;
  --border: #223042;

  /* Accent (cool blue/violet) */
  --accent-1: #7aa2ff;
  --accent-2: #9b86f9;
  --ring: #5b8cff;

  /* Effects */
  --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 20px 50px rgba(0, 0, 0, 0.55);

  /* Sizing */
  --radius-lg: 14px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --pad-lg: 22px;
  --pad-md: 18px;
  --pad-sm: 12px;

  /* Typography */
  --font-ui: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-cta: clamp(1rem, 0.8rem + 0.8vw, 1.15rem);
  --fw-cta: 650;
}

/* Base reset */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(90, 130, 255, 0.12), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(155, 134, 249, 0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  background-attachment: fixed;
  accent-color: var(--accent-1);
}

/* Layout */
.home {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6vmin 4vmin;
}

.grid {
  width: min(820px, 92vw);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: center;
  justify-items: center;
}

/* Button-as-link */
.calc-btn {
  --btn-bg: linear-gradient(180deg, rgba(28, 38, 52, 0.96), rgba(18, 26, 35, 0.96));
  --btn-bg-hover: linear-gradient(180deg, rgba(34, 48, 66, 0.98), rgba(20, 28, 38, 0.98));
  --btn-border: linear-gradient(180deg, #2b3a4d, #1c2734);
  --btn-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --btn-sh: var(--shadow-1);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text);
  width: 100%;
  padding: clamp(16px, 2.2vmin, 22px) clamp(18px, 2.5vmin, 26px);
  border-radius: var(--radius-lg);
  background: var(--btn-bg);
  box-shadow: var(--btn-inset), var(--btn-sh);
  border: 1px solid transparent;
  background-image:
    var(--btn-bg),
    var(--btn-border);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, filter 160ms ease;
  outline: none;
}

.calc-btn__label {
  font-weight: var(--fw-cta);
  font-size: var(--fs-cta);
  letter-spacing: 0.2px;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* States */
.calc-btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--btn-inset), var(--shadow-2);
  filter: brightness(1.03);
}

.calc-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.calc-btn:focus-visible {
  box-shadow:
    0 0 0 3px rgba(10, 15, 20, 0.9),
    0 0 0 5px var(--ring),
    var(--btn-inset),
    var(--shadow-2);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .calc-btn { transition: none; }
}

/* Small viewports */
@media (max-width: 420px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 14px;
    width: 94vw;
  }
}