@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* SmashEstimate — indigo glass foundation. One deep field, sea-glass accent, fine rules. */
:root {
  color-scheme: dark;
  --void: #151a44;
  --void-2: #1b2052;
  --bg: #151a44;
  --panel: rgba(38, 45, 97, .64);
  --panel-2: rgba(48, 56, 111, .74);
  --panel-3: rgba(59, 68, 127, .86);
  --panel-glass: rgba(20, 26, 67, .78);
  --text: #f0f3ff;
  --ink: #f0f3ff;
  --muted: #b8c2df;
  --muted-2: #a0adc9;
  --dim: #a0adc9;
  --accent: #83ddcf;
  --accent-hover: #a0eee2;
  --accent-strong: #5cb8b2;
  --accent-rgb: 131, 221, 207;
  --accent-ink: #122246;
  --red: var(--accent);
  --red-hot: var(--accent-hover);
  --red-dark: var(--accent-strong);
  --red-soft: rgba(var(--accent-rgb), .12);
  --green: #83d6b0;
  --amber: #e7c98a;
  --blue: #a9c2f5;
  --danger: #ed9695;
  --border: rgba(220, 229, 255, .14);
  --border-hi: rgba(220, 233, 255, .3);
  --line: var(--border);
  --line-bright: var(--border-hi);
  --shadow: 0 22px 54px rgba(5, 10, 34, .28);
  --shadow-soft: 0 9px 26px rgba(5, 10, 34, .2);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-xs: 7px;
  --font-sans: Manrope, "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", Manrope, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --content-width: 1180px;
}

html[data-color-mode="light"] {
  color-scheme: light;
  --bg: #e7ebf8;
  --panel: rgba(250, 251, 255, .84);
  --panel-2: rgba(255, 255, 255, .94);
  --panel-3: #dce3f4;
  --panel-glass: rgba(250, 251, 255, .9);
  --text: #1b244a;
  --ink: #1b244a;
  --muted: #4a5779;
  --muted-2: #5d6a8c;
  --accent: #277f83;
  --accent-hover: #368f92;
  --accent-strong: #1d676d;
  --accent-rgb: 39, 127, 131;
  --accent-ink: #09211b;
  --border: rgba(43, 57, 103, .16);
  --border-hi: rgba(43, 57, 103, .28);
  --shadow: 0 20px 46px rgba(35, 49, 91, .12);
  --shadow-soft: 0 8px 22px rgba(35, 49, 91, .09);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--bg); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 84% 2%, rgba(88, 117, 198, .16), transparent 34rem),
    radial-gradient(ellipse at 10% 92%, rgba(79, 157, 164, .07), transparent 42rem),
    var(--bg);
  background-attachment: fixed;
  font: 400 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
::selection { color: var(--accent-ink); background: rgba(var(--accent-rgb), .78); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}