/* ============================================================
   Kotkan Autotarvike, design-tokenit
   Lähde: docs/DESIGN.md (lukittu design-intent).
   Tämä tiedosto on tokenien AINOA totuus, älä kopioi arvoja
   muualle, viittaa custom-propertyihin.

   Structural DNA: Chapter Gates. Sivu vaihtaa luonnetta laskeutuessa:
   takomo-pimeä → luu-paperi (osarekisteri) → takomo-pimeä.
   ============================================================ */

:root {
  /* ---------- maa & pinnat (takomo) ---------- */
  --ground: #1b1712;         /* lämmin takomo, hieman vaaleampi (kontrastin tasoitus) */
  --ground-deep: #120e0a;    /* syvin: hero ja tiski */
  --ground-raise: #262019;   /* kohotettu pinta: kortit, nauhat */
  --ground-edge: #2f2820;    /* reunapinta, hover-taso */

  /* ---------- paperi & muste (valoisat luvut) ----------
     Sivuston painopiste on TÄSSÄ, ei pimeässä: yrittäjä on
     lämminhenkinen ja helposti lähestyttävä, ja sivun pitää
     näyttää häneltä. Takomo-pimeä on dramaattinen kehys, ei koko talo. */
  --paper: #e4d8bf;          /* luu, tummempi (Andy 2026-07-23: osiot yhä liian vaaleita) */
  --paper-deep: #d8cbb0;     /* paperin varjopinta, rivien vuorottelu */
  --linen: #cfbe9e;          /* lämmin pellava: nauhat ja korostetut laatikot */
  --sand: #bda684;           /* lämmin hiekka: viivat, ikonipohjat, reunat */

  /* ---------- siltasävyt (VAIN chapter-siirtymägradienteille) ----------
     Tumman ja vaalean todelliset välisävyt: kova raja korvataan liu'ulla. */
  --bridge-dark: #2a231a;
  --bridge-mid: #6b5d49;
  --bridge-warm: #a5947a;
  --bridge-dusk: #453a2c;
  --ink: #14110d;            /* muste paperilla: lähes musta, ei harmaa */
  --ink-muted: #4a4235;
  --ink-faint: #5e5445;        /* AA myös paper-deepillä, 4.63:1 */

  /* ---------- aksentit ---------- */
  --brass: #c4863c;          /* kotka, CTA, metallin lämpö */
  --brass-bright: #e0a860;   /* hover / hehku */
  --brass-deep: #7a4f1c;     /* paperilla: AA-kontrasti myös pienessä tekstissä */
  --brass-shelf: #764b1a;    /* paper-deepillä: AA pienille indekseille */
  --brass-linen: #6d4617;    /* pellavalla: AA pienille labeleille */
  --petrol: #2c4a45;         /* yksi viileä rannikkonuotti */
  --petrol-bright: #4a7b70;

  /* ---------- teksti pimeällä ---------- */
  --text: #eae2d3;
  --text-muted: #c0b7a6;
  --text-faint: #a89e8d;

  /* ---------- viivat ---------- */
  --line: #3a342b;           /* pimeä pinta */
  --line-soft: #2a251d;
  --line-ink: #c2b498;       /* paperi, näkyy tummemmalla luupaperilla */
  --line-ink-soft: #d4c7ae;
  --line-control: #6c6459;   /* tumman pinnan lomakekontrollit, 3.30:1 */

  /* Headerin korkeus kuuluu juureen: sita tarvitaan seka .masthead-elementissa
     etta html:n scroll-padding-topissa. Jos se elaa vain .masthead-elementilla,
     html kayttaa aina varafallbackia ja ankkurikohdistus menee pieleen. */
  --header-h: 72px;

  /* ---------- tila ---------- */
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 56ch;                                  /* leipätekstin luettava mitta */
  --container: 1240px;
  --container-wide: 1480px;
  --container-narrow: 860px;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* luvun sisäinen pystyrytmi, portit chapterien välissä */
  --chapter-pad: clamp(4.5rem, 11vh, 9rem);
  --chapter-gap: clamp(2.5rem, 6vh, 5rem);

  /* ---------- typografia ---------- */
  --font-display: "Clash Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  /* fluidi skaala, ei breakpoint-hyppyjä */
  --fs-hero: clamp(2.9rem, 1.1rem + 7.6vw, 8rem);
  --fs-h1: clamp(2.35rem, 1.35rem + 4.2vw, 5rem);
  --fs-h2: clamp(1.85rem, 1.3rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.95vw, 1.8rem);
  --fs-lead: clamp(1.06rem, 0.98rem + 0.42vw, 1.32rem);
  --fs-body: clamp(1.05rem, 1.015rem + 0.18vw, 1.14rem);
  --fs-small: 1.025rem;
  --fs-label: clamp(0.85rem, 0.82rem + 0.12vw, 0.92rem);
  --fs-index: clamp(0.88rem, 0.82rem + 0.28vw, 1rem);

  --lh-hero: 0.92;
  --lh-heading: 1.04;
  --lh-body: 1.68;
  --tracking-hero: -0.014em;
  --tracking-heading: -0.01em;
  --tracking-label: 0.16em;

  /* ---------- muoto ---------- */
  /* Sade valitaan pinnan ROOLIN mukaan, ei yhdella globaalilla arvolla.
     Yksi --radius: 0 kaikkeen tuottaa laatikkopinon, joka on AI-toteutuksen
     selvin tunnusmerkki. Terava kulma kuuluu editoriaaliseen kieleen
     (tilikirjarivit, mittaviivat, lukuportit). Kelluva pinta on fyysinen
     esine ja se saa pehmean sateen ja oikean varjon. */
  --radius: 0px;             /* editoriaaliset pinnat: rekisteri, portit, laatat */
  --radius-soft: 14px;       /* kelluvat paneelit: kupla, lipuke, varapaneeli */
  --radius-card: 8px;        /* kompaktit käyttöliittymäpinnat ja toimintoryhmät */
  --radius-pill: 100px;      /* vain pyorea kuplanappi */
  --border: 1px;
  --rule: 1px solid var(--line);
  --rule-ink: 1px solid var(--line-ink);

  /* ---------- liike (motion level 3) ----------
     Kaikki ajastus ja easing keskitetty tänne: Andyn feel-nuotit
     ("hitaampi fade", "pehmeämpi easing") toteutetaan tästä lohkosta. */
  --dur-instant: 120ms;
  --dur-fast: 220ms;
  --dur-mid: 480ms;
  --dur-slow: 820ms;
  --dur-gate: 620ms;         /* sivunvaihdon porttiliike */
  --stagger: 70ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* pehmeä laskeutuminen */
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);    /* napakka portti */
  --ease-elegant: cubic-bezier(0.33, 1, 0.68, 1);   /* rauhallinen ulos */

  /* ---------- kerrokset ---------- */
  --z-backdrop: 0;
  --z-content: 2;
  --z-gate: 5;
  --z-grain: 6;
  --z-header: 20;
  --z-bubble: 40;
  --z-menu: 50;

  /* ---------- varjot (niukat, materiaaliset) ---------- */
  --shadow-plate: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 12px 34px rgba(0, 0, 0, 0.34);
  --glow-brass: 0 0 0 1px rgba(196, 134, 60, 0.55), 0 10px 30px rgba(196, 134, 60, 0.14);
}

/* ------------------------------------------------------------
   Lukujen luonteet (Chapter Gates).
   Luku asettaa oman maansa ja mustepalettinsa; komponentit
   lukevat aina --chapter-*-muuttujia, eivät kovakoodattuja värejä.
   ------------------------------------------------------------ */
.chapter {
  --chapter-ground: var(--ground);
  --chapter-text: var(--text);
  --chapter-muted: var(--text-muted);
  --chapter-faint: var(--text-faint);
  --chapter-line: var(--line);
  --chapter-accent: var(--brass);
  --focus-ring: var(--brass-bright);
  background-color: var(--chapter-ground);
  color: var(--chapter-text);
}

.chapter--deep {
  --chapter-ground: var(--ground-deep);
}

.chapter--raise {
  --chapter-ground: var(--ground-raise);
  --chapter-line: var(--line);
}

/* luu-paperi: sivun luonteenvaihdos, osarekisteri painettuna */
.chapter--paper {
  --chapter-ground: var(--paper);
  --chapter-text: var(--ink);
  --chapter-muted: var(--ink-muted);
  --chapter-faint: var(--ink-faint);
  --chapter-line: var(--line-ink);
  --chapter-accent: var(--brass-deep);
  --focus-ring: var(--brass-deep);
}

/* lämmin pellava: ihmisen luvut, palvelu, asiointi, tiski */
.chapter--linen {
  --chapter-ground: var(--linen);
  --chapter-text: var(--ink);
  --chapter-muted: var(--ink-muted);
  --chapter-faint: var(--ink-muted);
  --chapter-line: var(--sand);
  --chapter-accent: var(--brass-linen);
  --focus-ring: var(--brass-linen);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-mid: 1ms;
    --dur-slow: 1ms;
    --dur-gate: 1ms;
    --stagger: 0ms;
  }
}