/* ponsGET — brand theme tokens
   Derived from the chrome-star logo: background red sampled at #C50102,
   chrome ramp sampled #979D8F (shadow) -> #BCC9BB (body) -> #E5F2EB (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-red: #C50102;          /* signature red, straight from the logo ground */
  --pg-red-hover: #A80102;
  --pg-red-press: #8C0101;
  --pg-red-tint: #FDECEC;     /* faint wash for callouts on light surfaces */
  --pg-red-ink: #5C0708;      /* text-safe red for small type on light */

  /* ---- Chrome (the star) ---- */
  --pg-chrome-hi: #E5F2EB;
  --pg-chrome: #BCC9BB;
  --pg-chrome-lo: #979D8F;
  --pg-chrome-gradient: linear-gradient(
    145deg,
    var(--pg-chrome-hi) 0%,
    var(--pg-chrome) 45%,
    var(--pg-chrome-lo) 100%
  );

  /* ---- Surfaces & text ---- */
  --pg-bg: #FFFFFF;
  --pg-surface: #F7F6F5;
  --pg-surface-2: #EFEDEB;
  --pg-border: #DEDAD7;
  --pg-text: #16110F;
  --pg-text-muted: #635C58;
  --pg-on-red: #FFFFFF;       /* text placed on --pg-red */

  /* ---- Focus / states ---- */
  --pg-focus: var(--pg-red);
  --pg-focus-ring: 0 0 0 3px rgba(197, 1, 2, 0.35);

  /* ---- Shape & motion ---- */
  --pg-radius: 10px;
  --pg-radius-lg: 18px;
  --pg-shadow: 0 1px 2px rgba(22, 17, 15, .06), 0 8px 24px rgba(22, 17, 15, .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-red: #FF3B3C;        /* lifted so it holds contrast on near-black */
    --pg-red-hover: #FF5A5B;
    --pg-red-press: #E02526;
    --pg-red-tint: #2A0C0C;
    --pg-red-ink: #FF8F90;

    --pg-bg: #0D0B0B;
    --pg-surface: #171313;
    --pg-surface-2: #211C1C;
    --pg-border: #322B2B;
    --pg-text: #F4F1EF;
    --pg-text-muted: #A8A09C;
    --pg-on-red: #14090A;

    --pg-focus-ring: 0 0 0 3px rgba(255, 59, 60, .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-red: #FF3B3C;
  --pg-red-hover: #FF5A5B;
  --pg-red-press: #E02526;
  --pg-red-tint: #2A0C0C;
  --pg-red-ink: #FF8F90;

  --pg-bg: #0D0B0B;
  --pg-surface: #171313;
  --pg-surface-2: #211C1C;
  --pg-border: #322B2B;
  --pg-text: #F4F1EF;
  --pg-text-muted: #A8A09C;
  --pg-on-red: #14090A;

  --pg-focus-ring: 0 0 0 3px rgba(255, 59, 60, .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 red ground the logo sits on.
   Tokens are re-pointed so ordinary components inside just work. */
.pg-brand-ground {
  --pg-bg: #C50102;
  --pg-surface: #B00102;
  --pg-surface-2: #9C0101;
  --pg-border: rgba(255, 255, 255, .22);
  --pg-text: #FFFFFF;
  --pg-text-muted: rgba(255, 255, 255, .74);
  --pg-focus-ring: 0 0 0 3px rgba(255, 255, 255, .55);
  background: var(--pg-bg);
  color: var(--pg-text);
}