/* Theme tokens — never hardcode a hex outside this file. */

:root,
:root[data-theme='light'] {
  /* رملي / Sand */
  --bg: #F3ECDD;
  --surface: #FBF6EA;
  --ink: #2A2119;
  --subtext: #8A7E6B;
  --hairline: #E7DCC7;
  --correct: #3E7C4F;
  --present: #E0A63C;
  --absent: #C3B7A2;
  --absent-text: #FFFFFF;
  --brand: #2E6B45;
  --tile-text: #FFFFFF;
  --key-bg: #FBF6EA;
  --overlay: rgba(42, 33, 25, 0.45);
  /* logo speech-bubble tile */
  --logo-tile: #3E7C4F;
  --logo-ink: #F6F1E7;
  --logo-q: #E6C25A;
}

:root[data-theme='dark'] {
  /* ليل / Night */
  --bg: #0E1116;
  --surface: #171C24;
  --ink: #F1F5F9;
  --subtext: #8A97A6;
  --hairline: #262E39;
  --correct: #22E087;
  --present: #FFB020;
  --absent: #29313C;
  --absent-text: #69737F;
  --brand: #22E087;
  --tile-text: #0E1116;
  --key-bg: #262E39;
  --overlay: rgba(0, 0, 0, 0.6);
  /* logo speech-bubble tile */
  --logo-tile: #3FC97A;
  --logo-ink: #12140F;
  --logo-q: #FFFFFF;
}

:root[data-theme='dark'] .tile[data-state='correct'],
:root[data-theme='dark'] .tile[data-state='present'] { color: var(--tile-text); }