/* =========================================================================
 * AnyPaya design tokens — "Halkaistu papaija"
 *
 * TÄMÄ ON AINOA PAIKKA, JOSSA BRÄNDIVÄRIT ON KIRJOITETTU HEX-ARVOINA.
 *
 * Jos sama hex esiintyy jossain muualla — tuotteessa, sivustolla, deckissä,
 * Keycloak-teemassa — se on bugi. Brändinvaihdon pitää olla tämän tiedoston
 * muokkaus, ei hakua ja korvausta läpi koodikannan.
 *
 * Sitova linjaus: docs/anypaya-ux-guidelines.md
 *
 * ---------------------------------------------------------------------
 * KOLME TASOA
 *
 *   1. Raakaväri   --papaya-flesh: #ff8a55        ← hex vain tässä
 *   2. Rooli       --accent-primary: var(--papaya-flesh)
 *   3. Käyttö      color: var(--accent-primary)   ← komponentit käyttävät tätä
 *
 * Komponentti EI saa käyttää tason 1 muuttujaa suoraan. Roolitaso on se,
 * joka mahdollistaa merkityksen muuttamisen ilman paletin muuttamista:
 * "vaatii toimintaa" voi vaihtua oranssista siniseen yhdellä rivillä.
 * ---------------------------------------------------------------------
 *
 * Lähteet joista tämä on koottu:
 *   - site/index.html            paletti (dark)
 *   - datapaya/web/src/styles.css  roolirakenne + light-teema
 * ========================================================================= */

/* =========================================================================
 * TASO 1 — Raakapaletti
 *
 * Nämä ovat brändin värit. Ne eivät kanna merkitystä: "flesh" ei tarkoita
 * "vaatii toimintaa", se tarkoittaa vain tiettyä oranssia.
 *
 * Lämpimät neutraalit vain — papaijassa ei ole harmaata.
 * Tumma pohja ei ole sinimusta (päätös 2026-07-06, DataPaya).
 * ========================================================================= */

:root {
  /* Neutraalit — tumma päästä vaaleaan */
  --papaya-void: #08090b;
  --papaya-ink-1: #131211;
  --papaya-ink-2: #1b1917;

  /* Liukusävyt voidin ympärillä. Erottavat vyöhykkeitä tummalla pinnalla
     ilman näkyvää rajaa — liian lähellä voidia ollakseen omia pintojaan,
     mutta tarpeeksi kaukana että silmä huomaa vaihdoksen. */
  --papaya-void-lift: #0b0c0e;
  --papaya-void-tint-cool: #090a0c;
  --papaya-void-tint-warm: #0d0c0b;
  --papaya-line: #2c2926;
  --papaya-line-strong: #3d3833;
  --papaya-fg: #f4ede4;
  --papaya-fg-muted: #b8ab9d;
  --papaya-fg-faint: #857b70;

  /* Lämpimät vaaleat — light-teeman pohjat */
  --papaya-cream: #fff7ef;
  --papaya-cream-panel: #fffdfa;
  --papaya-cocoa: #26180e;
  --papaya-cocoa-muted: #7e6a59;

  /* Papaijan hedelmäliha — brändin pääväri */
  --papaya-flesh: #ff8a55;
  --papaya-flesh-deep: #ff9e6b;
  --papaya-flesh-ink: #26180e;
  --papaya-flesh-dark: #c43f1d;

  /* Aksentit — tuoteväreille ja tiloille */
  --papaya-olive: #a8bf63;
  --papaya-gold: #f3c24e;
  --papaya-sky: #66c7d9;
  --papaya-mint: #62d6a4;
  --papaya-marigold: #f5a63c;
  --papaya-tan: #d99a6c;
  --papaya-plum: #7a3e9d;

  /* Virhe / vaara — ei ollut aiemmassa paletissa, varattu tässä.
     Poltettu punainen, ei kirkas — sopii lämpimään paletiin. */
  --papaya-ember: #b23a16;
  --papaya-ember-soft: #d4562c;
}

/* =========================================================================
 * TASO 2 — Roolit (light)
 *
 * Nämä kantavat merkityksen. Komponentit käyttävät VAIN näitä.
 * Light on oletus; dark alempana.
 * ========================================================================= */

:root {
  /* Pinnat */
  --surface-ground: var(--papaya-cream);
  --surface-panel: var(--papaya-cream-panel);
  --surface-raised: #ffffff;
  --surface-sunken: #f7ede2;

  /* Teksti */
  --text-primary: var(--papaya-cocoa);
  --text-muted: var(--papaya-cocoa-muted);
  --text-faint: #a08a76;
  --text-on-accent: var(--papaya-flesh-ink);

  /* Rajat */
  --border-subtle: rgba(38, 24, 14, 0.1);
  --border-strong: rgba(38, 24, 14, 0.22);
  --border-focus: var(--papaya-flesh-dark);

  /* Korostus — brändin pääsignaali */
  --accent-primary: var(--papaya-flesh-dark);
  --accent-fill: #ff7a45;
  --accent-glow: rgba(255, 138, 85, 0.3);

  /* Tilavärit — ks. anypaya-ux-guidelines.md §4.3.
     HUOM: nämä eivät ole tuotevärejä. Tila ja tuote eivät saa
     kilpailla samasta signaalista. */
  --state-neutral: var(--text-muted);
  --state-attention: var(--accent-primary);
  --state-warning: #b45309;
  --state-danger: var(--papaya-ember);
  --state-success: #4f6b15;
  --state-info: #2f6f80;

  /* Tilojen pehmeät taustat (chipit, huomiopalkit) */
  --state-warning-bg: #fef3c7;
  --state-warning-border: #f59e0b;
  --state-danger-bg: #fde4dc;
  --state-success-bg: #e8f0d4;

  /* Varjot ja peitteet */
  --shadow-soft: rgba(120, 60, 20, 0.08);
  --shadow-strong: rgba(120, 60, 20, 0.16);
  --backdrop: rgba(120, 60, 20, 0.1);
}

/* =========================================================================
 * TASO 2 — Roolit (dark)
 *
 * Kaksi mekanismia tarkoituksella:
 *   - prefers-color-scheme   järjestelmän asetus
 *   - [data-theme="dark"]    käyttäjän valinta, voittaa järjestelmän
 * ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-ground: #0d0907;
    --surface-panel: #1a120b;
    --surface-raised: var(--papaya-ink-2);
    --surface-sunken: var(--papaya-void);

    --text-primary: #ffebdc;
    --text-muted: #c2a38c;
    --text-faint: var(--papaya-fg-faint);
    --text-on-accent: var(--papaya-flesh-ink);

    --border-subtle: rgba(255, 235, 220, 0.14);
    --border-strong: rgba(255, 235, 220, 0.28);
    --border-focus: var(--papaya-flesh-deep);

    --accent-primary: var(--papaya-flesh-deep);
    --accent-fill: var(--papaya-flesh);

    --state-warning: #fbbf24;
    --state-danger: var(--papaya-ember-soft);
    --state-success: var(--papaya-olive);
    --state-info: var(--papaya-sky);

    --state-warning-bg: #3a2e0a;
    --state-warning-border: #b45309;
    --state-danger-bg: #3d1a10;
    --state-success-bg: #23300f;

    --shadow-soft: rgba(0, 0, 0, 0.5);
    --shadow-strong: rgba(0, 0, 0, 0.6);
    --backdrop: rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --surface-ground: #0d0907;
  --surface-panel: #1a120b;
  --surface-raised: var(--papaya-ink-2);
  --surface-sunken: var(--papaya-void);

  --text-primary: #ffebdc;
  --text-muted: #c2a38c;
  --text-faint: var(--papaya-fg-faint);
  --text-on-accent: var(--papaya-flesh-ink);

  --border-subtle: rgba(255, 235, 220, 0.14);
  --border-strong: rgba(255, 235, 220, 0.28);
  --border-focus: var(--papaya-flesh-deep);

  --accent-primary: var(--papaya-flesh-deep);
  --accent-fill: var(--papaya-flesh);

  --state-warning: #fbbf24;
  --state-danger: var(--papaya-ember-soft);
  --state-success: var(--papaya-olive);
  --state-info: var(--papaya-sky);

  --state-warning-bg: #3a2e0a;
  --state-warning-border: #b45309;
  --state-danger-bg: #3d1a10;
  --state-success-bg: #23300f;

  --shadow-soft: rgba(0, 0, 0, 0.5);
  --shadow-strong: rgba(0, 0, 0, 0.6);
  --backdrop: rgba(0, 0, 0, 0.55);
}

/* =========================================================================
 * SANAMERKKI
 *
 * Tuotekohtaiset värit POISTETTU 24.8.2026 (issue #271). Yhdeksän sävyä ei
 * tehnyt tuotteista tunnistettavia vaan tuoteperheestä hajanaisen. Konteksti
 * merkitään sanamerkillä ja tekstillä, ei sävyllä.
 *
 * Sääntö on OSAPERUSTEINEN: osa `paya` on aina koralli riippumatta siitä
 * onko se nimen alussa vai lopussa; nimen muu osa perii tekstin värin ja
 * kääntyy teeman mukana. Siksi variantteja per tuote ei ole eikä tarvita.
 *
 * docs/anypaya-ux-guidelines.md §4.2
 * ========================================================================= */

:root {
  /* Sanamerkin display-kirjasin. Ainoa webfont työkalunäkymässä (§4.4);
     fallback on tarkoituksella lähellä leveydeltään, jotta lataamaton tila
     ei hyppää. */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;

  /* `paya`-osan väri. Sama rooli kuin korostuksella, omalla nimellään koska
     se on brändielementti eikä toiminto — jos korostusväri joskus muuttuu
     tuotteessa, sanamerkki ei saa muuttua sen mukana. */
  --mark-accent: var(--accent-primary);
}