/* =============================================================================
   Design tokens - extracted from the ideearendus.ee live palette.
   Loaded first; calculator.css and the rest of the UI build on these.
   ============================================================================= */

/* Inter (body) + JetBrains Mono (code), same families as ideearendus.ee. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --primary: #0C144B;
  --primary-dark: #060A2E;
  --primary-light: #BACCE5;

  --accent: #FFD437;
  --accent-dark: #E6B800;

  --bg-dark: #0C144B;
  --bg-light: #E9F4FF;
  --bg-white: #FFFFFF;

  --border-color: #BACCE5;

  --text-dark: #0C144B;
  --text-body: #2A3460;
  --text-muted: #7C8DAD;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 99px;

  --shadow-sm: 0 1px 3px rgb(12 20 75 / .06);
  --shadow-md: 0 4px 16px rgb(12 20 75 / .08);
  --shadow-lg: 0 12px 36px rgb(12 20 75 / .12);
  --shadow-xl: 0 24px 56px rgb(12 20 75 / .16);
  --shadow-glow: 0 0 48px rgba(255, 212, 55, .25);

  --ok: #16a34a;
  --ok-bg: #dcfce7;
  --err: #dc2626;
  --err-bg: #fee2e2;
}

/* --- Base resets ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  color: var(--text-dark);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 .5em;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

code,
pre {
  font-family: var(--font-mono);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Primary: navy fill, white text. */
.btn-primary {
  background: var(--primary);
  color: var(--bg-white);
  border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  box-shadow: var(--shadow-md);
}

/* CTA: accent yellow fill, navy text, heavy weight, pill radius. */
.btn-cta {
  background: var(--accent);
  color: var(--text-dark);
  border-color: var(--accent);
  font-weight: 800;
  border-radius: var(--radius-pill);
  padding: 1rem 2rem;
}

.btn-cta:hover:not(:disabled) {
  background: var(--accent-dark);
  box-shadow: var(--shadow-glow);
}

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
}