/* ============================================================================
   WPPBX(TM) design tokens, v1.
   Values are OKLCH. Every token carries an sRGB fallback declared IMMEDIATELY
   BEFORE the oklch() value, so a browser without oklch() support gets a correct
   colour rather than an unset custom property. Both were computed from the same
   OKLCH triple and verified inside sRGB, so the two never disagree.

   Three theme states, deliberately:
     :root                                    complete light palette
     @media (prefers-color-scheme: dark)      the default "system" setting
       :root:not([data-theme="light"])        an explicit light choice still wins
     :root[data-theme="dark"]                 an explicit dark choice wins too
   Never declare a colour only inside a media or [data-theme] block.

   The same applies to color-scheme, declared in all three states below. Custom
   properties colour what WE draw; color-scheme is the only thing that tells the
   browser how to draw what IT draws, which is the list a select drops down,
   scrollbars, the caret and the date picker. Without it a dark page opens a
   white popup with a blue highlight.
   ============================================================================ */

:root{
  /* Light, and said out loud. */
  color-scheme: light;

  /* surfaces, warm paper, hue 85 */
  --bg:#FDFAF4;        --bg:oklch(0.985 0.008 85);
  --surf:#FFFFFF;
  --surf2:#F7F3EB;     --surf2:oklch(0.965 0.012 85);
  --surf3:#EFEBE1;     --surf3:oklch(0.94 0.014 85);
  --line:#E2DDD4;      --line:oklch(0.9 0.014 85);
  /* A second, stronger rule. Consoles need two weights of border: one that
     separates rows inside a panel and one that bounds the panel itself. */
  --line2:#C9C4B9;     --line2:oklch(0.82 0.016 85);

  /* ink, hue 60 to 75 */
  --ink:#261D16;       --ink:oklch(0.24 0.02 60);
  --ink2:#69625A;      --ink2:oklch(0.5 0.016 70);
  --ink3:#918B83;      --ink3:oklch(0.64 0.014 75);

  /* the one brand accent, hue 158 */
  --pri:#077045;       --pri:oklch(0.48 0.11 158);
  --priHover:#015D38;  --priHover:oklch(0.42 0.098 158);
  --priInk:#F7FEF9;    --priInk:oklch(0.99 0.01 158);
  --priSoft:#D6F4E1;   --priSoft:oklch(0.94 0.04 158);

  /* Information, hue 250. Anchors stay brand green; this is the separate hue
     for states that are merely informative. An informational chip drawn in the
     success colour claims something worked, and drawn in the brand colour it
     reads as an action. Neither is true, so it needs a hue of its own. */
  --info:#1666AA;      --info:oklch(0.5 0.13 250);
  --infoSoft:#DDEDFE;  --infoSoft:oklch(0.94 0.029 250);

  /* semantic. Green means reachable. Amber means calls are being sent on.
     Terracotta is ONLY a missed call or a first-time caller, never a system
     problem: a power cut is not the owner emergency. */
  --ok:#258651;        --ok:oklch(0.55 0.12 155);
  --okSoft:#D7F4E0;    --okSoft:oklch(0.94 0.04 155);
  --warn:#B47825;      --warn:oklch(0.62 0.12 70);
  --warnSoft:#FFEBD2;  --warnSoft:oklch(0.95 0.04 70);
  --off:#8E8479;       --off:oklch(0.62 0.02 70);
  --offSoft:#F2EEE9;   --offSoft:oklch(0.95 0.008 70);
  --alert:#B05139;     --alert:oklch(0.55 0.13 35);
  --alertSoft:#FFE7DF; --alertSoft:oklch(0.95 0.035 35);

  /* ONE canonical shadow. */
  --shadow:0 1px 2px rgba(38,29,22,.06), 0 8px 24px rgba(38,29,22,.07);
  --shadow:0 1px 2px oklch(0.24 0.02 60 / 0.06), 0 8px 24px oklch(0.24 0.02 60 / 0.07);

  /* 4pt spine */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* radius ladder */
  --r-chip:12px; --r-row:16px; --r-card:20px; --r-sheet:28px; --r-pill:999px;
  /* consoles sit tighter than prose surfaces, so they get their own rungs */
  --r-c-panel:9px; --r-c-tile:7px;

  /* reach */
  --gutter:20px; --card-pad:20px; --row-min:72px; --btn-h:54px; --tap-min:44px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#16120D;        --bg:oklch(0.185 0.012 70);
    --surf:#221D17;      --surf:oklch(0.235 0.014 70);
    --surf2:#2C2720;     --surf2:oklch(0.275 0.014 70);
    --surf3:#352F29;     --surf3:oklch(0.31 0.014 70);
    --line:#3D3730;      --line:oklch(0.34 0.014 70);
    --line2:#534C44;     --line2:oklch(0.42 0.016 70);
    --ink:#F1EEE9;       --ink:oklch(0.95 0.008 85);
    --ink2:#B2ADA6;      --ink2:oklch(0.75 0.012 80);
    --ink3:#848078;      --ink3:oklch(0.6 0.012 80);
    --pri:#51BD85;       --pri:oklch(0.72 0.13 158);
    --priHover:#69D49A;  --priHover:oklch(0.79 0.13 158);
    --priInk:#05160C;    --priInk:oklch(0.18 0.03 158);
    --priSoft:#153524;   --priSoft:oklch(0.3 0.05 158);
    --info:#6DB0F4;      --info:oklch(0.74 0.12 250);
    --infoSoft:#192F46;  --infoSoft:oklch(0.3 0.05 250);
    --ok:#60BB83;        --ok:oklch(0.72 0.12 155);
    --okSoft:#173523;    --okSoft:oklch(0.3 0.05 155);
    --warn:#E8A95C;      --warn:oklch(0.78 0.12 70);
    --warnSoft:#432E14;  --warnSoft:oklch(0.32 0.05 70);
    --off:#867F77;       --off:oklch(0.6 0.015 70);
    --offSoft:#2C2824;   --offSoft:oklch(0.28 0.01 70);
    --alert:#E37F65;     --alert:oklch(0.7 0.13 35);
    --alertSoft:#4C2C24; --alertSoft:oklch(0.33 0.05 35);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#16120D;        --bg:oklch(0.185 0.012 70);
  --surf:#221D17;      --surf:oklch(0.235 0.014 70);
  --surf2:#2C2720;     --surf2:oklch(0.275 0.014 70);
  --surf3:#352F29;     --surf3:oklch(0.31 0.014 70);
  --line:#3D3730;      --line:oklch(0.34 0.014 70);
  --line2:#534C44;     --line2:oklch(0.42 0.016 70);
  --ink:#F1EEE9;       --ink:oklch(0.95 0.008 85);
  --ink2:#B2ADA6;      --ink2:oklch(0.75 0.012 80);
  --ink3:#848078;      --ink3:oklch(0.6 0.012 80);
  --pri:#51BD85;       --pri:oklch(0.72 0.13 158);
  --priHover:#69D49A;  --priHover:oklch(0.79 0.13 158);
  --priInk:#05160C;    --priInk:oklch(0.18 0.03 158);
  --priSoft:#153524;   --priSoft:oklch(0.3 0.05 158);
  --info:#6DB0F4;      --info:oklch(0.74 0.12 250);
  --infoSoft:#192F46;  --infoSoft:oklch(0.3 0.05 250);
  --ok:#60BB83;        --ok:oklch(0.72 0.12 155);
  --okSoft:#173523;    --okSoft:oklch(0.3 0.05 155);
  --warn:#E8A95C;      --warn:oklch(0.78 0.12 70);
  --warnSoft:#432E14;  --warnSoft:oklch(0.32 0.05 70);
  --off:#867F77;       --off:oklch(0.6 0.015 70);
  --offSoft:#2C2824;   --offSoft:oklch(0.28 0.01 70);
  --alert:#E37F65;     --alert:oklch(0.7 0.13 35);
  --alertSoft:#4C2C24; --alertSoft:oklch(0.33 0.05 35);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}