/* pikakalori – design tokens
   Tämä on ulkoasun säätötiedosto. Kaikki värit, fontit, mitat ja pyöristykset
   määritellään täällä; index.html viittaa myöhemmin vain näihin muuttujiin.
   Leiskat: design-kanvas (ks. README). Graafi ja pallot säilyvät ennallaan. */

:root {
  color-scheme: light;

  /* --- Fontit ------------------------------------------------------------
     Display: Bricolage Grotesque (wordmark, otsikot, isot luvut)
     UI:      Instrument Sans (kaikki muu)
     <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet"> */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --nums: "tnum" 1, "lnum" 1;          /* font-feature-settings luvuille */

  /* Tyyppiskaala (px) */
  --fs-xs: 11px;   --lh-xs: 14px;
  --fs-sm: 13px;   --lh-sm: 18px;
  --fs-md: 15px;   --lh-md: 22px;
  --fs-lg: 17px;   --lh-lg: 24px;
  --fs-xl: 22px;   --lh-xl: 28px;
  --fs-2xl: 32px;  --lh-2xl: 36px;
  --fs-3xl: 44px;  --lh-3xl: 46px;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.08em;

  /* --- Värit: neutraalit (lämmin harmaa) --------------------------------- */
  --bg: #f4f3ef;          /* sivun pohja */
  --surface: #ffffff;     /* kortit, paneelit, sheetit */
  --surface-2: #ebe9e4;   /* upotetut alueet, numerolaatat */
  --ink: #16150f;         /* ensisijainen teksti */
  --ink-2: #5d5b55;       /* toissijainen teksti */
  --ink-3: #8c8a83;       /* apu- ja placeholder-teksti */
  --line: #dedcd5;        /* rajat */
  --line-strong: #b9b7b0; /* korostetut rajat, aktiivinen input */
  --grid: #e9e7e1;        /* graafin ruudukko */
  --axis: #c3c1ba;        /* graafin akselit */
  --scrim: rgba(22,21,15,.32); /* sheetin taustahimmennys */

  /* --- Korostus: yksi aksentti (proteiini = hyvä = vihreä) --------------- */
  --accent: #2c9e70;
  --accent-ink: #ffffff;
  --accent-soft: rgba(44,158,112,.14);
  --warn: #c8552f;        /* kaloripommit, poistot */
  --warn-soft: rgba(200,85,47,.14);

  /* --- Ketjuvärit (pallojen renkaat – säilyvät) --------------------------- */
  --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100; --c5:#e87ba4; --c6:#008300;
  --c7:#4a3aa7; --c8:#e34948; --c9:#7a5230; --c10:#0e8c9c; --c11:#8a8985; --c12:#b5651d;

  /* --- Mitat ------------------------------------------------------------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --control-h: 44px;       /* kosketuskohde mobiilissa */
  --control-h-desktop: 36px;
  --chip-h: 32px;
  --logo-size: 44px;       /* ketjulogo ympyränä */
  --sidebar-w: 300px;      /* desktopin vasen paneeli */
  --sheet-radius: 20px;

  /* Pyöristykset – hillityt */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;

  /* Viivat & varjot – yksi varjo, käytetään vain kelluville elementeille */
  --border: 1px solid var(--line);
  --shadow: 0 8px 28px rgba(22,21,15,.14), 0 1px 2px rgba(22,21,15,.08);
  --blur: blur(14px);

  /* Animaatio */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 120ms; --t-med: 220ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121211; --surface: #1b1b19; --surface-2: #242422;
    --ink: #f3f2ec; --ink-2: #aaa8a0; --ink-3: #757369;
    --line: #2b2b28; --line-strong: #44443f; --grid: #1e1e1c; --axis: #3d3d39;
    --scrim: rgba(0,0,0,.5);
    --accent: #3fb886; --accent-soft: rgba(63,184,134,.16);
    --warn: #e0673f; --warn-soft: rgba(224,103,63,.16);
    --shadow: 0 10px 32px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211; --surface: #1b1b19; --surface-2: #242422;
  --ink: #f3f2ec; --ink-2: #aaa8a0; --ink-3: #757369;
  --line: #2b2b28; --line-strong: #44443f; --grid: #1e1e1c; --axis: #3d3d39;
  --scrim: rgba(0,0,0,.5);
  --accent: #3fb886; --accent-soft: rgba(63,184,134,.16);
  --warn: #e0673f; --warn-soft: rgba(224,103,63,.16);
  --shadow: 0 10px 32px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
}