/* root.css
   Theme tokens for the TraQR × Craig Proctor page.

   Light values are lifted verbatim from the current sheets — the token
   block in postcards.css plus the literals that were hard-coded into the
   header buttons and the card image slot. Dark values are new, tuned to
   the same Material Design 3 relationships (same hue families, inverted
   lightness, AA contrast on body text).

   ── Wiring it up ──────────────────────────────────────────────────────
   1. Load this file BEFORE postcards.css.
   2. Delete the "/* Color *​/" and "/* Elevation *​/" blocks from the
      .tq-page rule in postcards.css. Custom properties resolve from the
      nearest ancestor that declares them, so .tq-page will keep beating
      :root no matter what the specificity or file order is — those
      duplicates must go or the theme will never switch.
   3. Toggle with document.documentElement.dataset.theme = 'dark' | 'light'.
      To follow the OS setting, set it once before first paint:

        <script>
          document.documentElement.dataset.theme =
            matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        </script>

   Structure, layout and type are untouched; this file only defines values.
--------------------------------------------------------------------- */

/* =====================================================================
   LIGHT — current design, unchanged
===================================================================== */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: var(--tq-bg);
}

:root {



  color-scheme: light;

  /* Surfaces */
  --tq-bg: #fdfcff;
  --tq-surface: #ffffff;
  --tq-surface-sunken: #f8f8f8;
  /* card image slot */
  --tq-surface-muted: #f2f0f4;
  /* image-slot placeholder */

  /* Text */
  --tq-text: #1b1b1f;
  --tq-text-secondary: #46464f;
  --tq-text-tertiary: #75757f;
  --tq-text-on-accent: #ffffff;

  /* Accent
     --tq-accent is the readable one (links, focus ring, text accents).
     --tq-accent-fill backs solid buttons and always pairs with
     --tq-text-on-accent. They are the same value in light, and diverge in
     dark, where a link-readable blue is too pale to sit behind white. */
  --tq-accent: #1e40af;
  --tq-accent-fill: #1e40af;
  --tq-accent-hover: #17347f;

  /* Brand */
  --tq-step-accent: #dc2626;
  --tq-step-accent-soft: rgba(220, 38, 38, 0.12);
  --tq-step-accent-glow: rgba(220, 38, 38, 0.22);
  --tq-cp-logo: #8c1d24;
  --tq-cp-brand: var(--tq-cp-logo);

  /* Lines */
  --tq-border: #e3e2e6;
  --tq-border-strong: #d3dae4;
  --tq-border-hairline: #e2e2e2;
  /* card image slot */
  --tq-divider: #c9c5d0;
  --tq-outline: #79747e;

  /* Header buttons */
  --tq-btn-login-bg: #ffffff;
  --tq-btn-login-bg-hover: #f7f9fc;
  --tq-btn-login-text: #101418;
  --tq-btn-login-border: #e0e5ec;
  --tq-btn-signup-bg: #1e4f94;
  --tq-btn-signup-bg-hover: #17417b;
  --tq-btn-signup-text: #ffffff;
  --tq-elev-signup: 0 4px 10px rgba(30, 79, 148, 0.18);
  --tq-elev-signup-hover: 0 8px 18px rgba(30, 79, 148, 0.26);

  /* Shadows */
  --tq-shadow-color: 0, 0, 0;
  --tq-elev-tile: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --tq-elev-tile-hover: 0 4px 10px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.08);
  --tq-elev-card: 0 1px 3px rgba(0, 0, 0, 0.15), 0 4px 8px 3px rgba(0, 0, 0, 0.06);
  --tq-elev-card-hover: 0 12px 28px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.1);
  --tq-elev-button: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
  --tq-elev-button-hover: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 8px 3px rgba(0, 0, 0, 0.1);
  --tq-elev-header: 0 1px 2px rgba(0, 0, 0, 0.04);
  --tq-elev-slot-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* =====================================================================
   DARK
   Shadow alone doesn't separate planes on a dark ground, so surfaces
   step up in lightness with elevation and shadows go deeper rather than
   softer. Borders carry more of the structural work.
===================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --tq-bg: #121317;
  --tq-surface: #1c1d22;
  --tq-surface-sunken: #202126;
  --tq-surface-muted: #26272d;

  /* Text — #e4e2e6 on #121317 is ~15:1, well clear of AA. */
  --tq-text: #e4e2e6;
  --tq-text-secondary: #c6c4cf;
  --tq-text-tertiary: #918f9a;
  --tq-text-on-accent: #ffffff;

  /* Accent — the pale blue reads as a link on the dark ground; the fill
     stays dark enough for white label text to clear AA. */
  --tq-accent: #9ec0ff;
  --tq-accent-fill: #3a63b8;
  --tq-accent-hover: #4b76cc;

  /* Brand — the light-theme reds go muddy against #121317, so both lift
     in lightness and drop in saturation to keep the same relationship. */
  --tq-step-accent: #ff6b6b;
  --tq-step-accent-soft: rgba(255, 107, 107, 0.16);
  --tq-step-accent-glow: rgba(255, 107, 107, 0.28);
  --tq-cp-logo: #e0898e;
  --tq-cp-brand: var(--tq-cp-logo);

  /* Lines */
  --tq-border: #34343a;
  --tq-border-strong: #43434b;
  --tq-border-hairline: #34343a;
  --tq-divider: #45454d;
  --tq-outline: #8f8d98;

  /* Header buttons */
  --tq-btn-login-bg: #23242a;
  --tq-btn-login-bg-hover: #2b2c33;
  --tq-btn-login-text: #e4e2e6;
  --tq-btn-login-border: #3a3b42;
  --tq-btn-signup-bg: #3a63b8;
  --tq-btn-signup-bg-hover: #4b76cc;
  --tq-btn-signup-text: #ffffff;
  --tq-elev-signup: 0 4px 10px rgba(0, 0, 0, 0.45);
  --tq-elev-signup-hover: 0 8px 18px rgba(0, 0, 0, 0.55);

  /* Shadows */
  --tq-shadow-color: 232, 232, 232;

  --tq-elev-tile:
    0 1px 2px rgba(232, 232, 232, 0.12),
    0 1px 1px rgba(232, 232, 232, 0.08);

  --tq-elev-tile-hover:
    0 2px 5px rgba(232, 232, 232, 0.14),
    0 1px 2px rgba(232, 232, 232, 0.08);

  /* --tq-elev-card:
  0 1px 2px rgba(232, 232, 232, 0.5),
  0 2px 5px rgba(232, 232, 232, 0.2); */

  --tq-elev-card:
    0 4px 14px -2px rgba(232, 232, 232, 0.12),
    0 2px 6px rgba(232, 232, 232, 0.06);

  --tq-elev-card-hover:
    0 5px 12px rgba(232, 232, 232, 0.16),
    0 2px 5px rgba(232, 232, 232, 0.1);

  --tq-elev-button:
    0 1px 2px rgba(232, 232, 232, 0.12),
    0 1px 1px rgba(232, 232, 232, 0.08);

  --tq-elev-button-hover:
    0 2px 5px rgba(232, 232, 232, 0.15),
    0 2px 3px rgba(232, 232, 232, 0.08);

  --tq-elev-header:
    0 1px 2px rgba(232, 232, 232, 0.10);

  --tq-elev-slot-hover:
    0 3px 7px rgba(232, 232, 232, 0.13);
}

/* Also honour the attribute if it lands on .tq-page instead of <html>. */
.tq-page[data-theme="dark"] {
  color-scheme: dark;
}

/* Keep the browser's own surfaces (scrollbars, form controls, the flash
   before first paint) in step with the theme. */
[data-theme="dark"] body,
body:has([data-theme="dark"]) {
  background: var(--tq-bg);
}

/* [data-theme="dark"] .tq-image-slot {
  background-color: #ffffff;
} */