/* ==========================================================================
   Golfeen.fi: design tokenit CSS-muuttujina
   Lähde: tokens.json. Älä muokkaa arvoja vain tähän, vaan pidä tiedostot synkassa.

   WordPressissä theme.json tuottaa --wp--preset--* -muuttujat. Tämä tiedosto
   lukee ne ensin ja käyttää omaa arvoa varalla, joten sama CSS toimii sekä
   esikatseluissa että teemassa.
   ========================================================================== */

:root {
  /* ---- Paletti: Mossy Meadow ---- */
  --gold-500:   var(--wp--preset--color--gold-500,   #b39c4d);
  --gold-300:   var(--wp--preset--color--gold-300,   #d4bf6e);
  --olive-500:  var(--wp--preset--color--olive-500,  #768948);
  --moss-600:   var(--wp--preset--color--moss-600,   #607744);
  --forest-700: var(--wp--preset--color--forest-700, #34623f);
  --forest-900: var(--wp--preset--color--forest-900, #1e2f23);

  /* ---- Pinnat ---- */
  --surface:        var(--wp--preset--color--surface,        #f6f5ea);
  --surface-raised: var(--wp--preset--color--surface-raised, #ffffff);
  --surface-sage:   var(--wp--preset--color--surface-sage,   #e8ead3);
  --surface-deep:   var(--forest-900);

  /* ---- Semanttiset värit (käytä komponenteissa näitä) ---- */
  --ink:            var(--forest-900);
  --ink-muted:      var(--wp--preset--color--ink-muted, #4b5747);
  --heading:        var(--forest-700);
  --link:           var(--forest-700);
  --action:         var(--forest-700);
  --action-hover:   var(--forest-900);
  --on-action:      #ffffff;
  --affiliate:      var(--gold-500);
  --affiliate-hover:var(--gold-300);
  --on-affiliate:   var(--forest-900);
  --on-deep:        var(--surface);
  --on-deep-muted:  #c5cdb4;
  --border-control: var(--olive-500);
  --border-deep:    #6b8265;
  --positive:       var(--forest-700);
  --negative:       var(--wp--preset--color--negative, #9a3f24);
  --focus:          var(--forest-900);
  --focus-on-deep:  var(--gold-500);

  /* ---- Fontit (ladataan paikallisesti, ks. fonts/fonts.css) ---- */
  --font-display: var(--wp--preset--font-family--display, "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif);
  --font-sans:    var(--wp--preset--font-family--sans, "Figtree", "Helvetica Neue", Arial, sans-serif);

  /* ---- Typografia: desktop (mobiiliarvot alla) ---- */
  --fs-display: 52px;  --lh-display: 60px;
  --fs-h1: 44px;       --lh-h1: 52px;
  --fs-h2: 32px;       --lh-h2: 40px;
  --fs-h3: 24px;       --lh-h3: 32px;
  --fs-h4: 20px;       --lh-h4: 28px;
  --fs-lead: 20px;     --lh-lead: 31px;
  --fs-body: 17px;     --lh-body: 28px;
  --fs-small: 14px;    --lh-small: 21px;
  --fs-eyebrow: 13px;  --lh-eyebrow: 16px;
  --fs-button: 16px;   --lh-button: 20px;
  --fs-nav: 16px;      --lh-nav: 24px;

  /* ---- Välit (4 px askel) ---- */
  --space-1: var(--wp--preset--spacing--1, 4px);
  --space-2: var(--wp--preset--spacing--2, 8px);
  --space-3: var(--wp--preset--spacing--3, 12px);
  --space-4: var(--wp--preset--spacing--4, 16px);
  --space-5: var(--wp--preset--spacing--5, 24px);
  --space-6: var(--wp--preset--spacing--6, 32px);
  --space-7: var(--wp--preset--spacing--7, 48px);
  --space-8: var(--wp--preset--spacing--8, 64px);
  --space-9: var(--wp--preset--spacing--9, 96px);

  /* ---- Kulmat ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-button: 24px;

  /* ---- Varjot ---- */
  --shadow-card:   var(--wp--preset--shadow--card,   0 1px 2px rgba(30,47,35,0.06), 0 8px 24px rgba(30,47,35,0.06));
  --shadow-raised: var(--wp--preset--shadow--raised, 0 2px 4px rgba(30,47,35,0.08), 0 16px 40px rgba(30,47,35,0.10));

  /* ---- Leveydet ---- */
  --content-width: 720px;
  --wide-width: 1200px;
  --alignwide-article: 960px;

  /* ---- Murtokohdat (vain dokumentaatioksi; media queryt eivät lue muuttujia) ----
     640px  mobiili: tyyppiskaala pienenee, ruudukot 1 sarake
     860px  tabletti: header vaihtuu menupainikkeeseen, 3 sarakkeen ruudukot 2 sarakkeeseen */
}

@media (max-width: 640px) {
  :root {
    --fs-display: 38px;  --lh-display: 44px;
    --fs-h1: 32px;       --lh-h1: 40px;
    --fs-h2: 26px;       --lh-h2: 34px;
    --fs-h3: 21px;       --lh-h3: 28px;
  }
}