/* ============================================================
   AjoWeppi — keskitetty väripaletti (YKSI TOTUUDEN LÄHDE)
   Perustuslaki §14: yksi brändi orange/navy KAIKKIALLA.
   Linkitä jokaisesta HTML:stä: <link rel="stylesheet" href="aw-tokens.css">
   Älä määrittele värejä paikallisesti — käytä semanttisia --aw-* tokeneita.
   ============================================================ */

:root {
  /* Brändi */
  --aw-orange:         #F26322;
  --aw-orange-strong:  #D9521A;  /* hover/active */
  --aw-orange-soft:    #FDEAE0;  /* vaalea tausta */
  --aw-navy:           #171C26;
  --aw-navy-strong:    #232A38;  /* hover/active */
  --aw-navy-muted:     #5B6577;  /* haalea teksti */
  --aw-radius:         14px;

  /* Semanttiset — OLETUS = vanhemman näkymä (navy-vetoinen) */
  --aw-bg:             #FFFFFF;
  --aw-surface:        #F6F7F9;
  --aw-surface-raised: var(--aw-navy-strong); /* kohotettu tumma pinta (paneelit, avatarit) */
  --aw-border:         #E3E6EB;
  --aw-text:           var(--aw-navy);
  --aw-text-muted:     var(--aw-navy-muted);
  --aw-primary:        var(--aw-navy);   /* otsikot, ensisijaiset napit */
  --aw-primary-strong: var(--aw-navy-strong);
  --aw-accent:         var(--aw-orange); /* korostukset, edistyminen, CTA */
}

/* Nuoren näkymä — orange-vetoinen (energia, kannustus).
   Lisää juurielementtiin class="aw-view-student". */
.aw-view-student {
  --aw-primary:        var(--aw-orange);
  --aw-primary-strong: var(--aw-orange-strong);
  --aw-surface:        var(--aw-orange-soft);
  --aw-accent:         var(--aw-navy);   /* navy kontrastina */
}