/* ==========================================================================
   zada4ko.com — Base layer: tokens, reset, typography, primitives
   ========================================================================== */

:root {
  /* Ink & paper */
  --ink: #241b45;
  --ink-2: #4a4173;
  --ink-3: #7b73a0;
  --cream: #fff6e9;
  --cream-2: #fdeed8;
  --paper: #ffffff;

  /* Playful accents */
  --sun: #ffc93c;
  --sun-d: #f0a800;
  --coral: #ff6b6b;
  --coral-d: #e8433f;
  --mint: #2fc4b2;
  --mint-d: #16a394;
  --sky: #4d96ff;
  --sky-d: #2a72e0;
  --grape: #9b5de5;
  --grape-d: #7a3ecb;
  --leaf: #52c41a;
  --bubble: #ff8fab;

  /* Semantic */
  --ok: #17a34a;
  --ok-bg: #e4f9ec;
  --bad: #e0374a;
  --bad-bg: #ffe9ec;

  /* Structure */
  --line: #241b45;
  --line-soft: #e3dbf0;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --r-xl: 36px;
  --pop: 0 5px 0 0 var(--line);
  --pop-lg: 0 8px 0 0 var(--line);
  --soft: 0 12px 30px -12px rgba(36, 27, 69, 0.35);

  /* Type */
  --f-display: "Comfortaa", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --f-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-num: "Nunito", ui-monospace, monospace;

  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(155, 93, 229, 0.12), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(77, 150, 255, 0.14), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(47, 196, 178, 0.12), transparent 45%);
  background-attachment: fixed;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
p { margin: 0 0 1em; }
a { color: var(--grape-d); text-decoration-thickness: 2px; text-underline-offset: 3px; }

img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 900px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

/* ---------- Fractions & maths bits ---------- */
.fr { white-space: nowrap; font-weight: 700; }
.fr sup, .fr sub { font-size: 0.7em; line-height: 0; }
.fr sup { margin-right: -0.08em; }
.fr sub { margin-left: -0.08em; }
.fr-w { font-weight: 800; margin-right: 0.18em; }
sup, sub { font-size: 0.68em; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--sun);
  --btn-sh: var(--sun-d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.7em 1.35em;
  border: 2.5px solid var(--line);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 0 0 var(--btn-sh), 0 6px 0 0 var(--line);
  transition: transform 0.12s var(--ease), box-shadow 0.12s ease, background 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--btn-sh), 0 8px 0 0 var(--line); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--btn-sh), 0 2px 0 0 var(--line); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-lg { padding: 0.85em 1.8em; font-size: 1.12rem; }
.btn-sm { padding: 0.45em 0.95em; font-size: 0.88rem; border-width: 2px; }
.btn-coral { --btn-bg: var(--coral); --btn-sh: var(--coral-d); color: #fff; }
.btn-mint  { --btn-bg: var(--mint);  --btn-sh: var(--mint-d);  color: #fff; }
.btn-sky   { --btn-bg: var(--sky);   --btn-sh: var(--sky-d);   color: #fff; }
.btn-grape { --btn-bg: var(--grape); --btn-sh: var(--grape-d); color: #fff; }
.btn-paper { --btn-bg: var(--paper); --btn-sh: #d9d0ea; }
.btn-ghost {
  background: transparent; box-shadow: none; border-color: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover { background: rgba(36, 27, 69, 0.07); box-shadow: none; transform: none; }
.btn-icon { padding: 0.55em; border-radius: 50%; aspect-ratio: 1; }

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 3px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--pop);
}
.card-pad { padding: clamp(18px, 3vw, 30px); }

/* ---------- Chips / pills ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.28em 0.8em;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.82rem; font-weight: 800;
}

/* ---------- Form controls ---------- */
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field > label, .lbl {
  font-family: var(--f-display); font-weight: 700; font-size: 0.9rem; color: var(--ink-2);
}
.inp, select.inp {
  padding: 0.6em 0.85em;
  border: 2.5px solid var(--line);
  border-radius: var(--r-s);
  background: var(--paper);
  font-weight: 700;
  width: 100%;
}
select.inp {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241b45' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65em center;
  background-size: 1.05em;
  padding-right: 2.4em;
}
.inp:focus { outline: none; box-shadow: 0 0 0 4px rgba(155, 93, 229, 0.28); }

.switchbar { display: flex; flex-wrap: wrap; gap: 8px; }
.switchbar input { position: absolute; opacity: 0; pointer-events: none; }
.switchbar label {
  cursor: pointer; user-select: none;
  padding: 0.42em 0.9em;
  border: 2.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--f-display); font-weight: 700; font-size: 0.92rem;
  transition: all 0.15s ease;
}
.switchbar input:checked + label {
  background: var(--ink); color: var(--cream); transform: translateY(-1px);
  box-shadow: 0 3px 0 0 var(--grape);
}
.switchbar input:focus-visible + label { outline: 3px solid var(--grape); outline-offset: 2px; }

/* Range */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px; background: var(--line-soft); border: 2px solid var(--line);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px;
  border-radius: 50%; background: var(--sun); border: 2.5px solid var(--line); cursor: grab;
}
input[type="range"]::-moz-range-track {
  height: 10px; border-radius: 999px; background: var(--line-soft); border: 2px solid var(--line);
}
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: var(--sun);
  border: 2.5px solid var(--line); cursor: grab;
}

/* ---------- Utility ---------- */
.row { display: flex; gap: 12px; }
.row-wrap { flex-wrap: wrap; }
.center { align-items: center; }
.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.muted { color: var(--ink-3); }
.tiny { font-size: 0.82rem; }
.tac { text-align: center; }
.mono { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}