/* ===========================================================
   DESIGN TOKENS - this is the only file you need to touch to
   reskin the whole tool to the CoastLife design.
   Every component in app.css reads from these variables.
   Three blocks, all required:
     :root                        -> light palette (the default)
     prefers-color-scheme: dark   -> dark palette for system setting
     [data-theme="dark"]          -> dark palette for an explicit toggle
   Keep all three in sync when you change a colour.
   =========================================================== */

:root{
  --ground:#F6FAFC; --surface:#FFFFFF; --surface-2:#E6EEF3; --surface-3:#EDF3F7;
  --ink:#10222E; --ink-mid:#4E6B7B; --ink-soft:#7FA3B5;
  --rule:#DCE8EE; --rule-soft:#E6EEF3;
  --water:#0C9ED0; --water-deep:#086B8E; --water-lite:#3FB9E4;
  --sun:#F58220; --sun-bg:#FDF1E4;
  --good:#2C7A54; --good-bg:#DCF0E4;
  --bad:#A33A2C; --bad-bg:#F8E4E0;
  --hero-ink:#F6FAFC;
  --shadow:0 1px 2px rgba(11,18,24,.06), 0 10px 30px -14px rgba(11,18,24,.28);
  --radius:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B1218; --surface:#101E29; --surface-2:#16293A; --surface-3:#0E1B26;
    --ink:#F6FAFC; --ink-mid:#A8C3D1; --ink-soft:#7FA3B5;
    --rule:#1F3648; --rule-soft:#16293A;
    --water:#3FB9E4; --water-deep:#7FD4F0; --water-lite:#5FC8EC;
    --sun:#F59A4E; --sun-bg:#3A2610;
    --good:#6FD69C; --good-bg:#123322;
    --bad:#EE9384; --bad-bg:#3A1912;
    --hero-ink:#F6FAFC;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
    --ground:#0B1218; --surface:#101E29; --surface-2:#16293A; --surface-3:#0E1B26;
    --ink:#F6FAFC; --ink-mid:#A8C3D1; --ink-soft:#7FA3B5;
    --rule:#1F3648; --rule-soft:#16293A;
    --water:#3FB9E4; --water-deep:#7FD4F0; --water-lite:#5FC8EC;
    --sun:#F59A4E; --sun-bg:#3A2610;
    --good:#6FD69C; --good-bg:#123322;
    --bad:#EE9384; --bad-bg:#3A1912;
    --hero-ink:#F6FAFC;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}