/* =========================================================
   HILLOMEDIA — DESIGN TOKENS
   Ainoa paikka, jossa brändiarvot määritellään.
   Vaalea teema, Hillo Red -korostus.
   ========================================================= */

:root {
  /* ---------- 1. BRÄNDIVÄRIT (brändikansio) ---------- */
  --brand-red: #d72638;
  --brand-white: #ffffff;
  --brand-dark: #1a1a1a;
  --brand-gray-light: #f6f6f4;
  /* Brändikansiossa lukee #8A8ABA, mutta värilaikku on neutraali harmaa.
     Käytetään neutraalia — sinertävä sävy rikkoisi paletin. */
  --brand-gray-mid: #8a8a8a;
  --brand-accent: #f04b5f;

  /* ---------- 2. LAAJENNETTU PALETTI ---------- */
  /* Punainen asteikko johdettu Hillo Redistä */
  --red-50: #fdf2f3;
  --red-100: #fbe0e3;
  --red-200: #f6c0c7;
  --red-300: #ef929e;
  --red-400: var(--brand-accent);
  --red-500: var(--brand-red);
  --red-600: #b81f2f;
  --red-700: #951926;
  --red-800: #6f131c;

  /* Neutraalit — hieman lämpimiä, jotta valkoinen ei ole kliininen */
  --neutral-0: #ffffff;
  --neutral-50: var(--brand-gray-light);
  --neutral-100: #ededea;
  --neutral-200: #dededa;
  --neutral-300: #c4c4c0;
  --neutral-400: #a3a3a0;
  --neutral-500: var(--brand-gray-mid);
  --neutral-600: #6b6b6b;
  --neutral-700: #4a4a4a;
  --neutral-800: #2e2e2e;
  --neutral-900: var(--brand-dark);

  /* ---------- 3. SEMANTTISET VÄRIT ---------- */
  --bg: var(--neutral-0);
  --bg-elevated: var(--neutral-50);
  --bg-sunken: var(--neutral-100);
  --bg-inverse: var(--neutral-900);

  --surface: var(--neutral-0);
  --surface-hover: var(--neutral-50);
  --surface-strong: var(--neutral-50);

  --border: #e6e6e2;
  --border-strong: #d2d2ce;
  --border-brand: rgba(215, 38, 56, 0.34);

  --text: var(--neutral-900);
  --text-muted: var(--neutral-700);
  /* Ei --neutral-600 (#6b6b6b): se antaa valkoisella vain 5,33:1, jolloin
     mikä tahansa taustagrafiikka pudottaa sen alle AA-rajan. #5a5a5a antaa
     6,9:1 ja jättää varaa osioiden taustakuville. */
  --text-subtle: #5a5a5a;
  --text-inverse: var(--neutral-0);

  --accent: var(--brand-red);
  --accent-ink: var(--neutral-0);
  /* Punainen TEKSTI, ei punainen pinta. Brändipunainen #d72638 antaa
     valkoisella 4,97:1 — vain 0,47 yli AA-rajan, joten osioiden taustakuva
     pudottaa pienen punaisen tekstin (eyebrow, tagit, linkit) alle 4,5:1.
     #b81f2f antaa 6,41:1 ja kestää taustakuvan (mitattu 5,15:1).
     Sama logiikka kuin --text-subtle. Pinnat, napit ja gradientit
     käyttävät edelleen --brand-redia, joten brändiväri ei haalene.
     Poikkeus: logo ja latausruudun wordmark käyttävät tarkkaa
     brändipunaista — WCAG 1.4.3 ei koske logotyyppiä. */
  --accent-text: var(--red-600);

  --focus-ring: var(--brand-red);

  /* Toiminnalliset tilat. Virhepunainen on tummempi kuin brändipunainen,
     jotta virhe erottuu CTA-napista eikä sekoitu brändiväriin. */
  --color-error: #9b151e;
  --color-success: #1a7f4b;

  /* ---------- 4. GRADIENTIT ---------- */
  /* Gradientin päällä on valkoista tekstiä (napit, merkit, ikonit), joten
     sen VAALEIN pää määrää kontrastin. Koroste #f04b5f antaisi vain 3,57:1
     — alle vaaditun 4,5:1. Aloitetaan siksi brändipunaisesta (4,97:1) ja
     tummennetaan. Korostetta käytetään vain koristeena ilman tekstiä. */
  --grad-brand: linear-gradient(135deg, var(--brand-red) 0%, var(--red-600) 60%, var(--red-700) 100%);
  --grad-accent: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-red) 100%);
  --grad-brand-soft: linear-gradient(160deg, rgba(215, 38, 56, 0.07), rgba(215, 38, 56, 0.015));
  --grad-text: linear-gradient(120deg, var(--neutral-900) 0%, var(--neutral-800) 60%, var(--brand-red) 100%);
  --grad-hairline: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
  --grad-surface: linear-gradient(180deg, var(--neutral-0), var(--neutral-50));

  /* ---------- 5. TYPOGRAFIA ---------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-display: clamp(3rem, 1.6rem + 7vw, 6rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 5rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.875rem);
  --fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-base: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tighter: -0.035em;
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-widest: 0.2em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- 6. SPACING (4px base) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --section-y-lg: clamp(6rem, 4rem + 9vw, 12rem);

  /* ---------- 7. LAYOUT ---------- */
  --container: 1200px;
  --container-narrow: 820px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  --grid-gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);

  /* ---------- 8. PYÖRISTYKSET ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ---------- 9. VARJOT & HEHKU ---------- */
  /* Vaalealla pinnalla varjot ovat hennot — muuten ilme muuttuu raskaaksi */
  --shadow-1: 0 1px 2px rgba(26, 26, 26, 0.05);
  --shadow-2: 0 4px 14px rgba(26, 26, 26, 0.07);
  --shadow-3: 0 12px 32px rgba(26, 26, 26, 0.09);
  --shadow-4: 0 28px 64px rgba(26, 26, 26, 0.12);
  --glow-red: 0 8px 24px rgba(215, 38, 56, 0.24);
  --glow-red-strong: 0 12px 36px rgba(215, 38, 56, 0.34);

  /* ---------- 10. LIIKE ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 800ms;

  /* ---------- 11. KERROKSET ---------- */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 50;
  --z-overlay: 60;
  --z-modal: 70;
}

@media (prefers-contrast: more) {
  :root {
    --text-muted: var(--neutral-900);
    --text-subtle: var(--neutral-800);
    --border: var(--neutral-300);
  }
}