/* PEpracticehub - design tokens.
   Single source of truth for color and type. Every page loads this first.

   Light by default. Dark when the reader's device asks for it. An explicit
   data-theme on <html> always beats the device, in either direction.

   Pages that need a different shadow, grid tint or accent shade override the
   individual variable in their own stylesheet, loaded after this one. */

:root{
  /* surfaces and text */
  --bg:#F5F7FB;
  --surface:#FFFFFF;
  --surface-2:#EDF1F8;
  --ink:#0F1B33;
  --muted:#56637A;
  --line:#D9E0EC;

  /* brand */
  --blue:#1E3F8A;
  --blue-deep:#12295F;
  --blue-soft:#E4EAF8;
  --blue-text:#1E3F8A;
  --amber:#F5A524;
  --amber-ink:#1A1300;
  --amber-soft:#FFF1D6;

  /* meaning, not brand: right, careful, wrong */
  --ok:#1D9A6C;
  --warn:#D97706;
  --bad:#C2410C;

  /* decoration */
  --shadow:0 24px 60px -26px rgba(18,41,95,.30);
  --grid:rgba(30,63,138,.09);

  /* type */
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;

  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1226;
    --surface:#111B36;
    --surface-2:#182448;
    --ink:#EEF2FA;
    --muted:#9AA7C2;
    --line:#24325A;

    --blue:#6F8FE0;
    --blue-deep:#16306E;
    --blue-soft:#182448;
    --blue-text:#9DB4F0;
    --amber:#FFB53B;
    --amber-ink:#1A1300;
    --amber-soft:#3A2B0C;

    --ok:#3DD598;
    --warn:#FBBF24;
    --bad:#FB923C;

    --shadow:0 24px 60px -26px rgba(0,0,0,.65);
    --grid:rgba(111,143,224,.10);

    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --bg:#0A1226;
  --surface:#111B36;
  --surface-2:#182448;
  --ink:#EEF2FA;
  --muted:#9AA7C2;
  --line:#24325A;

  --blue:#6F8FE0;
  --blue-deep:#16306E;
  --blue-soft:#182448;
  --blue-text:#9DB4F0;
  --amber:#FFB53B;
  --amber-ink:#1A1300;
  --amber-soft:#3A2B0C;

  --ok:#3DD598;
  --warn:#FBBF24;
  --bad:#FB923C;

  --shadow:0 24px 60px -26px rgba(0,0,0,.65);
  --grid:rgba(111,143,224,.10);

  color-scheme:dark;
}