/* Areia e mar: light on :root, dark via the system setting or data-theme="dark". */
:root {
  --color-bg: #FFFFFF;
  --color-surface-sunken: #F1EEE7;
  --color-text: #13232E;
  --color-text-muted: #4F5E68;
  --color-action: #1B4965;
  --color-on-action: #FFFFFF;
  --color-brand: #1F5F82;
  --color-tab-inactive: #5F6C75;
  --color-match-field: #1B4965;
  --color-on-match-field: #FFFFFF;
  --color-tile-1: #F4ECDD;
  --color-tile-2: #2C7DA0;
  --color-tile-3: #F7F2E8;
  --color-tile-4: #A9D6E5;
  --color-tile-5: #1B4965;
  --color-tile-6: #E4D5BC;
  --color-gema: #E76F51;
  --color-grout: #E6E1D6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0A151C;
    --color-surface-sunken: #13222C;
    --color-text: #EAF2F6;
    --color-text-muted: #9FB2BD;
    --color-action: #A9D6E5;
    --color-on-action: #0A2233;
    --color-brand: #A9D6E5;
    --color-tab-inactive: #8196A2;
    --color-match-field: #1B4965;
    --color-on-match-field: #FFFFFF;
    --color-tile-1: #1B4965;
    --color-tile-2: #F2E8D8;
    --color-tile-3: #123246;
    --color-tile-4: #61A5C2;
    --color-tile-5: #D9C9AE;
    --color-tile-6: #2C7DA0;
    --color-tile-7: #0A151C;
    --color-gema: #F4A261;
    --color-grout: #050B0F;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0A151C;
  --color-surface-sunken: #13222C;
  --color-text: #EAF2F6;
  --color-text-muted: #9FB2BD;
  --color-action: #A9D6E5;
  --color-on-action: #0A2233;
  --color-brand: #A9D6E5;
  --color-tab-inactive: #8196A2;
  --color-match-field: #1B4965;
  --color-on-match-field: #FFFFFF;
  --color-tile-1: #1B4965;
  --color-tile-2: #F2E8D8;
  --color-tile-3: #123246;
  --color-tile-4: #61A5C2;
  --color-tile-5: #D9C9AE;
  --color-tile-6: #2C7DA0;
  --color-tile-7: #0A151C;
  --color-gema: #F4A261;
  --color-grout: #050B0F;
}