/* Voolar 2026 — disainisüsteemi tokenid.
   Suund: Quiet Studio julge aktsendiga. Kõik nurgad teravad.
   WordPressi teema loeb sama faili. */

:root {
  /* Fondid — kõigil on õ ä ö ü š ž ja kirillitsa */
  --font-sans: "Inter Tight", system-ui, sans-serif;
  --font-cond: "Fira Sans Extra Condensed", "Inter Tight", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Värvid */
  --bg: #f5f3ee;
  --surface: #ffffff;
  --ink: #141414;
  --muted: #6b6966;
  --line: rgba(20, 20, 20, 0.13);          /* eraldusjoon, dekoratiivne */
  --line-strong: rgba(20, 20, 20, 0.5);     /* juhtelemendi ääris, 3,4:1 */
  --accent: #e4372b;        /* joon, täpp, fookus, suur tekst */
  --accent-fill: #d93226;   /* nupu täide: valge tekst 4,74:1 */
  --on-accent: #ffffff;

  /* Kirjaskaala: mobiil → desktop */
  --fs-h1: clamp(3rem, 8.4vw, 8rem);          /* 48 → 128 */
  --fs-h2: clamp(2.25rem, 5vw, 4.5rem);       /* 36 → 72 */
  --fs-statement: clamp(1.625rem, 2.9vw, 2.5rem); /* 26 → 40 */
  --fs-h3: clamp(1.375rem, 2vw, 1.75rem);     /* 22 → 28 */
  --fs-body: clamp(1rem, 0.95rem + 0.15vw, 1.0625rem); /* 16 → 17 */
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;                        /* 12 */

  --lh-h1: 0.95;
  --ls-h1: -0.04em;
  --ls-h2: -0.03em;

  /* Ruum: 8 px samm */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s6: 3rem; --s8: 4rem; --s12: 6rem;
  --gutter: clamp(1rem, 3vw, 2.5rem);         /* 16 → 40 */
  --col-gap: 1.5rem;                          /* 24 */
  --section: clamp(4.5rem, 10vw, 10rem);      /* 72 → 160 */
  --maxw: 1440px;

  /* Nurgad: kõik teravad */
  --r: 0;

  /* Liikumine */
  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --dur: 0.4s;
}

/* Aktsendi variandid (valik disainisüsteemi lehel) */
[data-accent="blue"] { --accent: #2338d1; --accent-fill: #2338d1; --on-accent: #ffffff; }
[data-accent="lime"] { --accent: #c6ef3c; --accent-fill: #c6ef3c; --on-accent: #141414; }

/* Tume sektsioon (tööd, jalus) */
.dark {
  --bg: #141414;
  --surface: #1e1e1e;
  --ink: #f5f3ee;
  --muted: #a3a09b;
  --line: rgba(245, 243, 238, 0.16);
  --line-strong: rgba(245, 243, 238, 0.45);
  background: var(--bg);
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; max-width: 62ch; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap); }

/* Pealkirjad */
h1, h2, h3, .h1, .h2, .h3 { margin: 0; font-weight: 500; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--ls-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }
.statement { font-size: var(--fs-statement); line-height: 1.15; letter-spacing: -0.02em; font-weight: 400; max-width: 30ch; }
.cond { font-family: var(--font-cond); font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.tone-accent { color: var(--accent); }

/* Mono-silt täpiga */
.label {
  display: inline-flex; align-items: center; gap: 0.6em;
  font: 400 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.label--dot::before { content: ""; width: 0.5em; height: 0.5em; background: var(--accent); }

/* Nupud */
.btn {
  display: inline-flex; align-items: center; gap: 0.9em;
  min-height: 48px; padding: 0 1.25rem;
  border: 1px solid var(--ink); border-radius: var(--r);
  background: var(--ink); color: var(--bg);
  font: 500 0.9375rem/1 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--accent { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
/* Punane nupp: hiirega tumeneb, tekst jääb valgeks (ka siis, kui ümbritsev link muutub punaseks) */
.btn.btn--accent:hover, .btn.btn--accent:focus-visible { background: color-mix(in srgb, var(--accent-fill) 82%, #000); border-color: color-mix(in srgb, var(--accent-fill) 82%, #000); color: var(--on-accent); }
.btn:not(.btn--accent):not(.btn--ghost):hover { color: var(--bg); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.link-arrow { display: inline-flex; gap: 0.5em; align-items: center; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; font-weight: 500; }
.link-arrow .arrow { transition: transform var(--dur) var(--ease); }
.link-arrow:hover .arrow { transform: translateX(4px); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Joontega nimekiri */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { border-bottom: 1px solid var(--line); }
.rows > li:last-child { border-bottom: 0; }
.rows a {
  display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: baseline; gap: var(--s2);
  padding-block: var(--s3); text-decoration: none;
  transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rows a:hover { padding-left: var(--s2); }
.rows a:hover .arrow { color: var(--accent); transform: translateX(4px); }
.rows .num { font: 400 var(--fs-label)/1 var(--font-mono); color: var(--muted); }
.rows .name { font-size: var(--fs-h3); letter-spacing: -0.015em; }
.rows .arrow { transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }

/* Logo (kitsas sõnamärk) — pilt, kuni SVG eksport on olemas */
.logo { display: block; width: 92px; aspect-ratio: 940 / 560; }
.logo img { width: 100%; height: 100%; object-fit: contain; filter: invert(1); mix-blend-mode: multiply; }
.dark .logo img { filter: none; mix-blend-mode: screen; }

/* Ilmumine vaatesse tulles */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}