/* Design tokens: the kawaii palette custom properties.
   Extracted from index.html's inline <style>. Linked before the inline <style>
   so every var() resolves.

   Dark mode uses the robust 4-tier pattern so the explicit choice always wins:
     :root                                  -> light tokens (default)
     @media (prefers-color-scheme: dark)    -> dark tokens (auto follows the OS,
                                               works before the JS runs, zero flash)
     :root[data-theme="light"]              -> force light (beats the OS by
     :root[data-theme="dark"]                  specificity, both directions)
   The dark palette is a hand-tuned kawaii night look (soft plum/charcoal), NOT an
   inversion: pastels are lifted to keep AA contrast on the dark surfaces. */
:root{
  --cream:#FFF9F2;      /* page background */
  --blush:#FFE7EF;      /* subtle pink surface / input borders */
  --pink:#FF9EBB;       /* primary accent */
  --pink-deep:#E8748F;  /* deep accent + button shadow */
  --cocoa:#5C4742;      /* main text */
  --cocoa-soft:#9C8078; /* muted text */
  --butter:#FFF3C9;     /* plate surface */
  --white:#FFFFFF;      /* cards / surfaces / inputs */
  --nav-face:#FFFFFF;   /* top-bar button face (keeps the hand-drawn icons legible) */
  --sel-bg:#5C4742;     /* selected chip / segment fill */
  --sel-fg:#FFFFFF;     /* selected chip / segment text */
  --machine-1:#EFE6DA;  /* photo-automat housing (top) */
  --machine-2:#E3D6C6;  /* photo-automat housing (bottom) */
  --switch-off:#E4D7CE; /* toggle track, off state */
}

/* auto: follow the OS when no explicit choice was made */
@media (prefers-color-scheme: dark){
  :root{
    --cream:#1b1420;      /* deep plum-charcoal page */
    --blush:#3a2c46;      /* raised plum line / input border */
    --pink:#FF9EBB;       /* rose stays vivid on the dark ground */
    --pink-deep:#E8748F;  /* still reads as text (AA) and darkens buttons */
    --cocoa:#F4E9F1;      /* warm near-white text */
    --cocoa-soft:#C7B3C9; /* muted lavender, AA on both dark grounds */
    --butter:#3b3020;     /* warm dark plate */
    --white:#2a2036;      /* plum surface, one notch above the page */
    --nav-face:#EFE4EE;   /* light chip so the ink icons keep contrast */
    --sel-bg:#FF9EBB;     /* selected fill turns rose on dark... */
    --sel-fg:#2a1420;     /* ...with dark plum text for AA */
    --machine-1:#2f2440;  /* dark plum booth housing */
    --machine-2:#241a30;
    --switch-off:#4a3a52; /* dark plum toggle track */
  }
}

/* force light: wins over a dark OS */
:root[data-theme="light"]{
  --cream:#FFF9F2;
  --blush:#FFE7EF;
  --pink:#FF9EBB;
  --pink-deep:#E8748F;
  --cocoa:#5C4742;
  --cocoa-soft:#9C8078;
  --butter:#FFF3C9;
  --white:#FFFFFF;
  --nav-face:#FFFFFF;
  --sel-bg:#5C4742;
  --sel-fg:#FFFFFF;
  --machine-1:#EFE6DA;
  --machine-2:#E3D6C6;
  --switch-off:#E4D7CE;
}

/* force dark: wins over a light OS */
:root[data-theme="dark"]{
  --cream:#1b1420;
  --blush:#3a2c46;
  --pink:#FF9EBB;
  --pink-deep:#E8748F;
  --cocoa:#F4E9F1;
  --cocoa-soft:#C7B3C9;
  --butter:#3b3020;
  --white:#2a2036;
  --nav-face:#EFE4EE;
  --sel-bg:#FF9EBB;
  --sel-fg:#2a1420;
  --machine-1:#2f2440;
  --machine-2:#241a30;
  --switch-off:#4a3a52;
}