/* pumpGET — brand theme tokens
   Derived from the porcelain-star logo: background green sampled at #036D3B,
   porcelain ramp sampled #BABEB7 (shadow) -> #D8D8D5 (body) -> #EAEAE9 (highlight).
   Light palette is defined on bare :root; dark and [data-theme] blocks only
   redefine tokens, never introduce a color that exists nowhere else. */

:root {
  /* ---- Brand ---- */
  --pg-green: #036D3B;        /* signature green, straight from the logo ground */
  --pg-green-hover: #025A31;
  --pg-green-press: #024827;
  --pg-green-tint: #E7F3EC;   /* faint wash for callouts on light surfaces */
  --pg-green-ink: #033D22;    /* text-safe green for small type on light */

  /* ---- Danger ---- kept red: with a green brand, "bad" can't borrow it */
  --pg-danger: #C50102;
  --pg-danger-tint: #FDECEC;
  --pg-danger-ink: #5C0708;

  /* ---- Chrome (the star — porcelain, name kept so components don't churn) ---- */
  --pg-chrome-hi: #EAEAE9;
  --pg-chrome: #D8D8D5;
  --pg-chrome-lo: #BABEB7;
  --pg-chrome-gradient: linear-gradient(
    145deg,
    var(--pg-chrome-hi) 0%,
    var(--pg-chrome) 45%,
    var(--pg-chrome-lo) 100%
  );

  /* ---- Surfaces & text ---- */
  --pg-bg: #FBFCFA;           /* porcelain, a breath off white */
  --pg-surface: #F2F5F1;
  --pg-surface-2: #E6ECE7;
  --pg-border: #D3DBD5;
  --pg-text: #0E1A13;         /* green-black, not neutral */
  --pg-text-muted: #56655B;
  --pg-on-green: #FFFFFF;     /* text placed on --pg-green */

  /* ---- Focus / states ---- */
  --pg-focus: var(--pg-green);
  --pg-focus-ring: 0 0 0 3px rgba(3, 109, 59, 0.35);

  /* ---- Shape & motion ---- */
  --pg-radius: 10px;
  --pg-radius-lg: 18px;
  --pg-shadow: 0 1px 2px rgba(14, 26, 19, .06), 0 8px 24px rgba(14, 26, 19, .08);
  --pg-ease: cubic-bezier(.2, .7, .3, 1);
}

/* Dark — system default, unless the viewer explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pg-green: #2ED47A;      /* lifted so it holds contrast on near-black */
    --pg-green-hover: #52DE93;
    --pg-green-press: #22B867;
    --pg-green-tint: #0F2419;
    --pg-green-ink: #8FEBB6;

    --pg-danger: #FF5C5D;
    --pg-danger-tint: #2A0C0C;
    --pg-danger-ink: #FF8F90;

    --pg-bg: #07110C;         /* forest-black */
    --pg-surface: #0D1B13;
    --pg-surface-2: #15271C;
    --pg-border: #213A2B;
    --pg-text: #EDF3EF;
    --pg-text-muted: #97A99D;
    --pg-on-green: #06140C;

    --pg-focus-ring: 0 0 0 3px rgba(46, 212, 122, .40);
    --pg-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
  }
}

/* Dark — explicit choice wins in both directions */
:root[data-theme="dark"] {
  --pg-green: #2ED47A;
  --pg-green-hover: #52DE93;
  --pg-green-press: #22B867;
  --pg-green-tint: #0F2419;
  --pg-green-ink: #8FEBB6;

  --pg-danger: #FF5C5D;
  --pg-danger-tint: #2A0C0C;
  --pg-danger-ink: #FF8F90;

  --pg-bg: #07110C;
  --pg-surface: #0D1B13;
  --pg-surface-2: #15271C;
  --pg-border: #213A2B;
  --pg-text: #EDF3EF;
  --pg-text-muted: #97A99D;
  --pg-on-green: #06140C;

  --pg-focus-ring: 0 0 0 3px rgba(46, 212, 122, .40);
  --pg-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
}

/* A section that flips to the full brand green ground the logo sits on.
   Tokens are re-pointed so ordinary components inside just work. */
.pg-brand-ground {
  --pg-bg: #036D3B;
  --pg-surface: #025F33;
  --pg-surface-2: #02522C;
  --pg-border: rgba(255, 255, 255, .22);
  --pg-text: #FFFFFF;
  --pg-text-muted: rgba(255, 255, 255, .78);
  --pg-focus-ring: 0 0 0 3px rgba(255, 255, 255, .55);
  background: var(--pg-bg);
  color: var(--pg-text);
}

/* In dark mode a full-strength green slab is loud next to forest-black, so
   large grounds (the sidebar) drop to a deeper shade of the same green.
   Small grounds — the brand panels — keep the logo's exact green. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-brand-ground.is-deep {
    --pg-bg: #06371F;
    --pg-surface: #052E1A;
    --pg-surface-2: #0A4428;
  }
}
:root[data-theme="dark"] .pg-brand-ground.is-deep {
  --pg-bg: #06371F;
  --pg-surface: #052E1A;
  --pg-surface-2: #0A4428;
}