/* ==========================================================================
   DailyPlay — design tokens
   --------------------------------------------------------------------------
   Dark is the default surface; `data-theme="light"` on <html> swaps it.
   `data-palette="cb"` swaps the green accent for a colourblind-safe blue.
   Every colour used anywhere in the app comes from this file.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Fonts — self-hosted (was Google Fonts). Latin + Latin Extended subsets;
   the browser only downloads a subset when a page actually uses a glyph
   from its unicode-range. Files live in /public/fonts/ (OFL licensed, see
   /fonts/LICENSES.txt).
   --------------------------------------------------------------------------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/poppins-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/poppins-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/poppins-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/poppins-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/fonts/poppins-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/fonts/poppins-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/cinzel-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/cinzel-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/cinzel-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/cinzel-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  color-scheme: dark;

  /* --- Ground & surfaces ------------------------------------------------ */
  --bg:            #0c0e0c;   /* page ground — near-black, faint green bias */
  --bg-veil:       rgba(8, 10, 8, 0.72);
  --surface:       #191c19;   /* tiles, panels */
  --surface-hi:    #222621;   /* hover / raised */
  --surface-sunk:  #121412;   /* inset wells */
  --line:          #2b302a;   /* hairlines */
  --line-hi:       #3b423a;

  /* --- Ink -------------------------------------------------------------- */
  --ink:           #f2f5f1;
  --ink-2:         #9aa598;
  --ink-muted:     #6c756a;

  /* --- Accent ----------------------------------------------------------- */
  --accent:        #4ade80;
  --accent-hi:     #7ef0a5;
  --accent-ink:    #04220f;                   /* text sitting on accent fill */
  --accent-soft:   rgba(74, 222, 128, 0.13);
  --accent-line:   rgba(74, 222, 128, 0.42);
  --accent-glow:   rgba(74, 222, 128, 0.16);

  /* --- Status ----------------------------------------------------------- */
  --pending:       #e8b84b;

  /* --- Shape & motion --------------------------------------------------- */
  --r-sm:   9px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-pill: 999px;

  --shadow:    0 1px 2px rgba(0,0,0,.45), 0 14px 32px -18px rgba(0,0,0,.85);
  --shadow-hi: 0 1px 2px rgba(0,0,0,.45), 0 20px 44px -20px rgba(0,0,0,.9);

  --dur:  170ms;
  --dur-slow: 280ms;
  --ease: cubic-bezier(.22,.72,.28,1);

  --measure: 1000px;

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --- Light theme ---------------------------------------------------------
   Not an inversion: the grounds warm slightly and the green deepens so it
   still carries contrast against white. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #f4f6f3;
  --bg-veil:       rgba(244, 246, 243, 0.78);
  --surface:       #ffffff;
  --surface-hi:    #f0f3ee;
  --surface-sunk:  #e9ece6;
  --line:          #dde2d9;
  --line-hi:       #c6cdc2;

  --ink:           #11150f;
  --ink-2:         #55604f;
  --ink-muted:     #7b8575;

  --accent:        #17a34a;
  --accent-hi:     #0f8b3d;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(23, 163, 74, 0.11);
  --accent-line:   rgba(23, 163, 74, 0.38);
  --accent-glow:   rgba(23, 163, 74, 0.14);

  --pending:       #b9791a;

  --shadow:    0 1px 2px rgba(16,24,14,.06), 0 12px 28px -18px rgba(16,24,14,.3);
  --shadow-hi: 0 1px 3px rgba(16,24,14,.08), 0 20px 40px -20px rgba(16,24,14,.34);
}

/* --- Colourblind-safe accent --------------------------------------------
   Green/red is the worst pair for deuteranopia and protanopia, and daily
   games lean on it hard. This swaps the whole accent ramp for blue. */
:root[data-palette="cb"] {
  --accent:      #67b0ff;
  --accent-hi:   #9acbff;
  --accent-ink:  #03203f;
  --accent-soft: rgba(103, 176, 255, 0.15);
  --accent-line: rgba(103, 176, 255, 0.45);
  --accent-glow: rgba(103, 176, 255, 0.18);
  --pending:     #f0a13a;
}

:root[data-theme="light"][data-palette="cb"] {
  --accent:      #1d6fd1;
  --accent-hi:   #17599f;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(29, 111, 209, 0.11);
  --accent-line: rgba(29, 111, 209, 0.4);
  --accent-glow: rgba(29, 111, 209, 0.14);
  --pending:     #b06a11;
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.01ms; --dur-slow: 0.01ms; }
}
:root[data-motion="reduced"] { --dur: 0.01ms; --dur-slow: 0.01ms; }
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}