/* Pipezoom marketing site: assets/css/tokens.css
   The design tokens, and the only file with literal color values. The colors
   are copied from the :root block and the light theme of
   app.pipezoom.com/css/base.css. Dark is the default; light applies through
   data-theme="light" on <html>, stored in localStorage as pz-theme.
   Globals: custom properties on :root and [data-theme="light"].
   Notes: docs/notes/pipezoom.com/assets/css/tokens.css.md */

:root{
  color-scheme:dark;

  /* Brand navy: the 2nd stop of the CTA band gradient. */
  --brand-navy:#003b71;

  /* Backgrounds, darkest to lightest in the dark theme: sunken, page, raised, high, hover. */
  --surface-sunken:#0f141a;
  --surface-page:#151b22;
  --surface-raised:#1c232b;
  --surface-high:#252e39;
  --surface-hover:#2d3743;

  /* Lines */
  --line:#2f3a45;
  --line-strong:#3f4c5a;

  /* Ink: hierarchy comes from these steps plus size and weight. */
  --ink:#e9eef3;
  --ink-soft:#a9b5c2;
  --ink-faint:#78858f;
  --ink-inverse:#ffffff;
  --on-accent-soft:#ffffffc7;
  --on-accent-line:#ffffff38;

  /* Accent: --accent-strong fills buttons and tiles under white text. */
  --accent:#0063b1;
  --accent-strong:#3b7fba;
  --accent-hover:#4e95d2;
  --accent-wash:#192937;
  --accent-edge:#a9cdec;
  --accent-ring:#0072ce66;
  --accent-ring-soft:#0072ce33;

  /* Gold is money only; good and danger mark real results. */
  --gold:#f9b311;
  --gold-ink:#f9b311;
  --gold-wash:#332810;
  --gold-edge:#6d5622;
  --good:#1f8a54;
  --good-ink:#1f8a54;
  --good-wash:#12291d;
  --good-edge:#245c3f;
  --danger:#ef5f62;
  --danger-wash:#33212a;
  --danger-edge:#5e3038;
  --danger-ink:#f6ccd0;

  /* Overlays */
  --scrim:#0a0e13b3;
  --topbar-veil:#151b22f2;
  --shadow-overlay:0 16px 44px #00000085, 0 2px 6px #00000059;
  --shadow-drawer:0 0 48px #000000a6;

  /* Shell: the tokens of the header, the mobile nav and the footer. For the
     white wordmark, the light theme keeps them dark. */
  --shell-bg:#0f141a;
  --shell-raised:#1c232b;
  --shell-high:#252e39;
  --shell-line:#2f3a45;
  --shell-line-strong:#3f4c5a;
  --shell-ink:#e9eef3;
  --shell-ink-soft:#a9b5c2;
  --shell-ink-faint:#78858f;
  --shell-veil:#151b22f2;

  /* Radius */
  --radius:10px;
  --radius-sm:7px;
  --radius-pill:999px;

  /* Site tokens with no web app counterpart: the light button, the
     header shadow, type, width, spacing and motion. */
  --btn-light-bg:#ffffff;
  --btn-light-hover:#e9eef3;
  --btn-light-ink:#16202b;
  --btn-light-edge:#ffffff;
  --shadow-sm:0 1px 3px #0000004d;
  --font-body:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --container-max:1120px;
  --header-h:64px;
  --tap:44px;
  --space-xs:0.25rem;
  --space-sm:0.5rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2rem;
  --space-2xl:3rem;
  --space-3xl:4rem;
  --space-4xl:6rem;
  --transition-fast:150ms ease;
  --transition-base:250ms ease;
}

/* Light: a light page inside the dark shell, as base.css defines it. */
[data-theme="light"]{
  color-scheme:light;

  --surface-sunken:#e9edf2;
  --surface-page:#f5f7fa;
  --surface-raised:#ffffff;
  --surface-high:#eef1f6;
  --surface-hover:#e2e8ef;

  --line:#d7dde5;
  --line-strong:#b2bcc8;

  --ink:#16202b;
  --ink-soft:#4b5a68;
  --ink-faint:#67747f;
  --ink-inverse:#ffffff;

  --accent:#0063b1;
  --accent-strong:#3b7fba;
  --accent-hover:#4e95d2;
  --accent-wash:#192937;
  --accent-edge:#a9cdec;
  --accent-ring:#0072ce66;
  --accent-ring-soft:#0072ce33;

  --gold:#f9b311;
  --gold-ink:#9a6a00;
  --gold-wash:#fdf1dc;
  --gold-edge:#e3c184;
  --good:#12784a;
  --good-ink:#12784a;
  --good-wash:#e6f4ec;
  --good-edge:#a8d5bd;
  --danger:#bf262c;
  --danger-wash:#fdeded;
  --danger-edge:#efb8b8;
  --danger-ink:#7a1a1e;

  --scrim:#16202ba6;
  --topbar-veil:#f5f7faf2;
  --shadow-overlay:0 16px 44px #16202b26, 0 2px 6px #16202b17;
  --shadow-drawer:0 0 48px #16202b3d;

  --shell-bg:#243040;
  --shell-raised:#2f3d4f;
  --shell-high:#394859;
  --shell-line:#3a4859;
  --shell-line-strong:#4c5c70;
  --shell-ink:#f4f7fb;
  --shell-ink-soft:#d4dde7;
  --shell-ink-faint:#b8c4d1;
  --shell-veil:#243040;

  --btn-light-hover:#eef1f6;
  --btn-light-edge:#b2bcc8;
  --shadow-sm:0 1px 3px #16202b24;
}