/* Single source of truth for the Papaya PDF brand accent.
   Loaded by the app (index.html) and by every static page via seo.css
   (blog, about, privacy, terms, guides). Change these and the whole site
   follows: buttons, tiles, highlights, focus rings. */
:root {
  --brand-accent: #7058e8;
  --brand-accent-rgb: 112 88 232;
  --brand-accent-grad: linear-gradient(135deg, #7a5af0 0%, #5472ec 100%);
  --brand-radius: 12px;

  /* Tactile primary buttons: four layers, each with one job.
     1. a top-edge highlight (light catching the lip),
     2. a darker bottom lip (thickness),
     3. a tight contact shadow (sits it on the surface),
     4. a glow in the button's own colour, pulled in with negative spread
        so it pools under the button instead of haloing around it.
     Every state keeps the same four-entry inset/outset shape so box-shadow
     interpolates smoothly between rest, hover and press. Dark mode only
     retunes the ingredients below. */
  --brand-button-highlight: rgb(255 255 255 / 34%);
  --brand-button-lip: rgb(0 0 0 / 18%);
  --brand-button-contact: rgb(28 16 68 / 28%);
  --brand-button-glow: rgb(var(--brand-accent-rgb) / 60%);
  --brand-button-glow-strong: rgb(var(--brand-accent-rgb) / 72%);
  --brand-button-press: rgb(0 0 0 / 26%);

  --brand-button-shadow:
    inset 0 1px 0 var(--brand-button-highlight),
    inset 0 -2px 0 var(--brand-button-lip),
    0 1px 2px var(--brand-button-contact),
    0 8px 24px -6px var(--brand-button-glow);
  --brand-button-shadow-hover:
    inset 0 1px 0 var(--brand-button-highlight),
    inset 0 -2px 0 var(--brand-button-lip),
    0 2px 3px var(--brand-button-contact),
    0 12px 30px -6px var(--brand-button-glow-strong);
  --brand-button-shadow-active:
    inset 0 2px 4px var(--brand-button-press),
    inset 0 0 0 transparent,
    0 0 1px var(--brand-button-contact),
    0 3px 10px -6px var(--brand-button-glow);

  /* Compact variant for small in-app dialog buttons. */
  --brand-button-shadow-sm:
    inset 0 1px 0 var(--brand-button-highlight),
    inset 0 -1px 0 var(--brand-button-lip),
    0 1px 2px var(--brand-button-contact),
    0 4px 12px -4px var(--brand-button-glow);
  --brand-button-shadow-sm-hover:
    inset 0 1px 0 var(--brand-button-highlight),
    inset 0 -1px 0 var(--brand-button-lip),
    0 1px 3px var(--brand-button-contact),
    0 6px 16px -4px var(--brand-button-glow-strong);
  --brand-button-shadow-sm-active:
    inset 0 1px 3px var(--brand-button-press),
    inset 0 0 0 transparent,
    0 0 1px var(--brand-button-contact),
    0 2px 6px -4px var(--brand-button-glow);
}

/* Dark: a full-strength highlight reads as a chrome rim and a coloured
   contact shadow vanishes, so soften the rim, deepen the lip and let the
   glow carry the lift. The app sets data-theme; static pages follow the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-button-highlight: rgb(255 255 255 / 18%);
    --brand-button-lip: rgb(0 0 0 / 30%);
    --brand-button-contact: rgb(0 0 0 / 50%);
    --brand-button-glow: rgb(var(--brand-accent-rgb) / 50%);
    --brand-button-glow-strong: rgb(var(--brand-accent-rgb) / 64%);
    --brand-button-press: rgb(0 0 0 / 40%);
  }
}

:root[data-theme="dark"] {
  --brand-button-highlight: rgb(255 255 255 / 18%);
  --brand-button-lip: rgb(0 0 0 / 30%);
  --brand-button-contact: rgb(0 0 0 / 50%);
  --brand-button-glow: rgb(var(--brand-accent-rgb) / 50%);
  --brand-button-glow-strong: rgb(var(--brand-accent-rgb) / 64%);
  --brand-button-press: rgb(0 0 0 / 40%);
}