/* Sutja CRM:n design-tokenit (issue #20). Ainoa paikka, jossa värit, välistykset,
   pyöristykset, typografia ja varjot määritellään arvoina. Sovellus (app.css) ja
   kirjautumis- ja hyväksyntäsivut (style.css) käyttävät vain näitä muuttujia.

   Kolme tasoa:
   1. Perusarvot (palette): nykyisen metsäteeman värit niiden omilla nimillä.
   2. Semanttiset tokenit: mihin väriä käytetään (pinta, teksti, korostus, vaara).
      Tyylit viittaavat vain näihin, eivät perusarvoihin.
   3. Teemat: [data-theme] ylikirjoittaa semanttiset tokenit. Oletusteema on
      nykyinen vaalea metsäteema; sutja-preview on sutja.fi:n tummaan ilmeeseen
      perustuva kokeiluteema, jolla todennetaan, että ilme vaihtuu pelkillä tokeneilla.

   Design systemin käyttöönotto: vaihda semanttisten tokenien arvot (tai lisää teema)
   tässä tiedostossa. Näkymiä ja komponentteja ei tarvitse muokata. */

:root{
  /* 1. Perusarvot: vaalea metsäteema */
  --havu:#1b2f29;--metsa:#1e5842;--metsa-tumma:#163f30;--jakala:#eef2ef;--valkea:#fff;
  --sammal:#d3ddd7;--kivi:#7d9388;--harmaa:#56685f;--aamu:#b98422;
  --puolukka:#a12b2b;--puolukka-vaalea:#f8eaea;
  --sumu:#edf1ed;--niitty:#dce9dd;

  /* 2. Semanttiset värit */
  --color-scheme:light;
  --color-bg:var(--jakala);              /* sivun tausta */
  --color-surface:var(--valkea);         /* kortit, paneelit, kentät */
  --color-surface-subtle:var(--jakala);  /* sarakkeet, hover */
  --color-on-surface:var(--havu);        /* leipäteksti */
  --color-text-muted:var(--harmaa);      /* toissijainen teksti */
  --color-border:var(--sammal);
  --color-border-strong:var(--kivi);     /* lomakekenttien reuna */
  --color-accent:var(--metsa);           /* painikkeet, valinnat */
  --color-accent-hover:var(--metsa-tumma);
  --color-on-accent:var(--valkea);
  --color-link:var(--metsa);             /* linkit ja korostettu teksti */
  --color-header:var(--metsa);           /* yläpalkki */
  --color-on-header:var(--valkea);
  --color-header-input:var(--valkea);    /* yläpalkin hakukenttä */
  --color-on-header-input:var(--havu);
  --color-header-highlight:var(--aamu);  /* valittu valikkokohta */
  --color-inverse:var(--havu);           /* ilmoituspalkki */
  --color-on-inverse:var(--valkea);
  --color-focus:var(--aamu);
  --color-marker:var(--aamu);            /* listamerkit */
  --color-danger:var(--puolukka);
  --color-danger-subtle:var(--puolukka-vaalea);
  --color-backdrop:var(--sumu);          /* aloitussivun tausta */
  --color-illustration:var(--niitty);    /* aloitussivun kuvan tausta */

  /* Välistykset: 4 px:n yksikkö (--space-N = N × 4 px) ja puolikkaat askeleet */
  --space-0-5:2px;--space-1:4px;--space-1-5:6px;--space-2:8px;--space-2-5:10px;
  --space-3:12px;--space-3-5:14px;--space-4:16px;--space-4-5:18px;--space-5:20px;
  --space-5-5:22px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;
  --space-12:48px;--space-16:64px;--space-40:160px;

  /* Pyöristykset */
  --radius-sm:6px;   /* painikkeet, kentät, kortit */
  --radius-md:8px;   /* paneelit, ilmoitukset */
  --radius-lg:16px;  /* kirjautumissivun kortti */
  --radius-xl:24px;  /* aloitussivun kuva */
  --radius-pill:999px;
  --radius-control:var(--radius-sm);  /* painikkeet ja lomakekentät */
  --radius-button:var(--radius-control);

  /* Typografia */
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-heading:var(--font-body);
  --text-12:.75rem;--text-13:.8125rem;--text-14:.875rem;--text-14-4:.9rem;--text-15:.9375rem;
  --text-16:1rem;--text-17:1.0625rem;--text-18:1.125rem;--text-20:1.25rem;--text-28:1.75rem;--text-36:2.25rem;
  --text-base:16px;
  --leading-body:1.5;--leading-relaxed:1.6;--leading-tight:1.15;
  --weight-regular:400;--weight-semibold:600;--weight-bold:700;

  /* Varjot */
  --shadow-popover:0 8px 24px #1b2f2922;
  --shadow-toast:0 8px 24px #1b2f2955;
  --shadow-raised:0 16px 60px #203c2912;
}

/* Kokeiluteema sutja.fi:n väreistä (tumma pohja, magenta korostus, pyöreät
   painikkeet). Ei oletus; otetaan käyttöön attribuutilla data-theme="sutja-preview"
   html-elementissä. Kontrastit tarkistetaan testissä test/tokens.test.mjs (WCAG AA). */
[data-theme="sutja-preview"]{
  --yo:#111622;--yo-pinta:#1c2333;--yo-reuna:#3c475a;--yo-kivi:#6b778c;
  --magenta:#da01c1;--magenta-painike:#cc01b4;--magenta-tumma:#b0009b;--magenta-vaalea:#ff7af0;--valkoinen:#fff;
  --lumi:#f5f7fa;--usva:#aab4c5;--kulta:#ffc85a;--karpalo:#ff8a8a;--karpalo-tumma:#3a1e26;

  --color-scheme:dark;
  --color-bg:var(--yo);
  --color-surface:var(--yo-pinta);
  --color-surface-subtle:var(--yo);
  --color-on-surface:var(--lumi);
  --color-text-muted:var(--usva);
  --color-border:var(--yo-reuna);
  --color-border-strong:var(--yo-kivi);
  /* Painikkeen tausta on brändin magentaa hieman tummempi, jotta valkoinen teksti
     täyttää AA-kontrastin (4,5:1); brändin magenta näkyy korostuksissa. */
  --color-accent:var(--magenta-painike);
  --color-accent-hover:var(--magenta-tumma);
  --color-on-accent:var(--valkoinen);
  --color-link:var(--magenta-vaalea);
  --color-header:var(--yo-pinta);
  --color-on-header:var(--lumi);
  --color-header-input:var(--yo);
  --color-on-header-input:var(--lumi);
  --color-header-highlight:var(--magenta);
  --color-inverse:var(--lumi);
  --color-on-inverse:var(--yo);
  --color-focus:var(--kulta);
  --color-marker:var(--magenta-vaalea);
  --color-danger:var(--karpalo);
  --color-danger-subtle:var(--karpalo-tumma);
  --color-backdrop:var(--yo);
  --color-illustration:var(--yo-pinta);

  --radius-md:8px;
  --radius-button:var(--radius-pill);
  --shadow-popover:0 8px 24px #00000066;
  --shadow-toast:0 8px 24px #00000088;
  --shadow-raised:0 16px 60px #00000055;
}