/* ===========================================================================
   Noste.io — simulaattorin designtokenit
   Valkoinen pohja. Puhelimen sisällä WhatsAppin vaalea teema.

   Sääntö: mikään näkymän tiedosto ei sisällä hex-koodia. Kaikki värit
   tulevat täältä. Jos tarvitset uuden sävyn, lisää se tähän ja perustele
   DESIGN.md:ssä.
   =========================================================================== */

:root {
  /* --- Noste --- */
  --mint:       #73F6BC;  /* täyttö, ei koskaan teksti vaalealla */
  --mint-wash:  #E8FBF2;  /* kevyt korostustausta */
  --mint-deep:  #0F7A52;  /* mintun tekstiversio vaalealla, 5.9:1 */
  --mint-ink:   #06231A;  /* teksti mintun päällä, 14.7:1 */

  /* --- pinnat --- */
  --ground:     #FFFFFF;  /* sivun tausta */
  --surface:    #FFFFFF;  /* kortit, paneelit */
  --stage:      #F7F9F8;  /* puhelimen alusta */
  --sunken:     #F3F6F4;  /* kentät, dokumenttinäkymä, napit */
  --line:       #E6EAE8;  /* ulkoreuna */
  --line-soft:  #F0F3F1;  /* sisäjaot */

  /* --- teksti --- */
  --text:       #101A16;
  --dim:        #5A6862;
  --dimmer:     #8A968F;

  /* --- tilat --- */
  --ok:         #1C7A52;
  --warn:       #96700C;
  --crit:       #B32A2F;

  /* --- WhatsApp, vaalea teema. Käytetään VAIN puhelimen sisällä. --- */
  --wa-bg:      #EFEAE2;
  --wa-bar:     #F0F2F5;
  --wa-in:      #FFFFFF;  /* prospektin viesti */
  --wa-out:     #D9FDD3;  /* botin viesti */
  --wa-text:    #111B21;
  --wa-meta:    #667781;
  --wa-tick:    #53BDEB;
  --wa-field:   #FFFFFF;

  /* --- typografia --- */
  --disp: "Fira Sans Condensed", "Fira Sans", sans-serif;
  --sans: "Fira Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Fira Mono", ui-monospace, Menlo, monospace;

  /* --- muoto --- */
  --r-sm: 8px;   /* puhekuplat */
  --r:    11px;  /* kentät, pienet kortit */
  --r-lg: 16px;  /* sovelluskehys */
  --r-pill: 20px;

  /* --- syvyys --- */
  --lift-1: 0 1px 2px rgba(16,32,26,.07);
  --lift-2: 0 1px 2px rgba(16,32,26,.04), 0 12px 32px rgba(16,32,26,.05);
  --lift-3: 0 1px 2px rgba(16,32,26,.07), 0 14px 34px rgba(16,32,26,.10);

  /* --- rytmi --- */
  --gap-1: 6px;
  --gap-2: 12px;
  --gap-3: 20px;
  --gap-4: 32px;
}

/* Tumma tila on olemassa, mutta valkoinen on ensisijainen.
   Älä suunnittele tummaa varten ensin. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E1210; --surface: #151A17; --stage: #101512; --sunken: #0C100E;
    --line: #232B27; --line-soft: #1B211E;
    --text: #EDF2EF; --dim: #94A19A; --dimmer: #6D7A73;
    --mint-wash: rgba(115,246,188,.12);
    --mint-deep: #73F6BC;  /* tummalla mintusta tulee luettava tekstiväri */
    --ok: #3FBF7F; --warn: #D8A322; --crit: #E1565B;
  }
}
:root[data-theme="dark"] {
  --ground: #0E1210; --surface: #151A17; --stage: #101512; --sunken: #0C100E;
  --line: #232B27; --line-soft: #1B211E;
  --text: #EDF2EF; --dim: #94A19A; --dimmer: #6D7A73;
  --mint-wash: rgba(115,246,188,.12);
  --mint-deep: #73F6BC;
  --ok: #3FBF7F; --warn: #D8A322; --crit: #E1565B;
}

/* ===========================================================================
   Pohja
   =========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.02;
  margin: 0;
}
h1 { font-size: clamp(28px, 5vw, 44px); }
h2 { font-size: 22px; letter-spacing: .03em; }
h3 { font-size: 15px; letter-spacing: .05em; }

/* Osioiden pikkuotsikot ovat Fira Sansia ja normaalilla kirjainkoolla.
   Versaali monospace tekee työkalusta teknisen ja kovan. */
.label {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dim);
  letter-spacing: 0;
  text-transform: none;
}

/* Monospace vain koneen omalle tiedolle: polut, mallitunnisteet, kellonajat. */
code, .mono { font-family: var(--mono); font-size: 12px; }

:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ===========================================================================
   Napit
   =========================================================================== */

.btn {
  font: 500 12.5px/1 var(--sans);
  padding: 8px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--sunken);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { background: var(--line-soft); }
.btn--go { background: var(--mint); color: var(--mint-ink); font-weight: 600; }
.btn--go:hover { filter: brightness(.96); }
.btn--quiet { background: transparent; color: var(--dim); }

/* ===========================================================================
   WhatsApp-puhekuplat. Nämä eivät ole Noste-tyylielementtejä vaan
   jäljitelmä siitä, mitä vastaanottaja oikeasti näkee puhelimessaan.
   Älä siisti näitä Nosteen näköisiksi.
   =========================================================================== */

.bub {
  position: relative;
  max-width: 78%;
  padding: 6px 9px 7px;
  font-size: 14.2px;
  line-height: 1.42;
  color: var(--wa-text);
  box-shadow: 0 1px .5px rgba(11,20,26,.13);
}
.bub.in  { align-self: flex-start; background: var(--wa-in);  border-radius: 0 var(--r-sm) var(--r-sm) var(--r-sm); }
.bub.out { align-self: flex-end;   background: var(--wa-out); border-radius: var(--r-sm) 0 var(--r-sm) var(--r-sm); }

/* Kuplan häntä. Vain ryhmän ensimmäisessä kuplassa. */
.bub.in::before,
.bub.out::before { content: ""; position: absolute; top: 0; width: 0; height: 0; border: 8px solid transparent; }
.bub.in::before  { left: -8px;  border-top-color: var(--wa-in);  border-right-width: 0; }
.bub.out::before { right: -8px; border-top-color: var(--wa-out); border-left-width: 0; }
.bub.tailless::before { display: none; }
.bub.tailless.in  { border-top-left-radius: var(--r-sm); }
.bub.tailless.out { border-top-right-radius: var(--r-sm); }

.bub .meta { float: right; margin: 6px 0 -2px 8px; font-size: 11px; color: var(--wa-meta); }
.bub .tick { color: var(--wa-tick); }