/* Brand tokens. Change --pff-brand when the logo colour changes.
   Derived colours follow inside the color-mix @supports block. */

:root {
  color-scheme: dark;

  --pff-brand: #f8a800;
  --pff-ink: #12100c;
  --pff-paper: #f4efe6;
  --pff-sky: #52a6dd;
  --pff-meadow: #2c5428;
  --pff-white: #fffdf8;

  --pff-brand-deep: #ae7704;
  --pff-brand-soft: #fbce70;
  --pff-ink-soft: #68655f;
  --pff-text-dim: #aca8a0;
  --pff-text-secondary: #ddd6c8;
  --pff-surface-2: #2e220b;
  --pff-on-brand: var(--pff-ink);
  --pff-line: rgba(248, 168, 0, 0.42);
  --pff-rule-faint: rgba(255, 253, 248, 0.1);
  --pff-rule-faint-strong: rgba(255, 253, 248, 0.12);

  --font-sans: "Segoe UI Variable", "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;

  --page-pad: clamp(1.1rem, 4.2vw, 5.5rem);
  --page-max: 88rem;
  --measure: 38rem;
  --nav-height: 4.35rem;
  --hairline: 1px;
  --brand-rule: 2px;
  --touch-min: 2.75rem;

  --z-scrim: 15;
  --z-header: 20;
  --z-nav: 21;
  --z-skip: 40;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 220ms;
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  :root {
    --pff-brand-deep: color-mix(in srgb, var(--pff-brand) 68%, var(--pff-ink));
    --pff-brand-soft: color-mix(in srgb, var(--pff-brand) 55%, var(--pff-white));
    --pff-ink-soft: color-mix(in srgb, var(--pff-ink) 62%, var(--pff-paper));
    --pff-text-dim: color-mix(in srgb, var(--pff-paper) 68%, var(--pff-ink));
    --pff-text-secondary: color-mix(in srgb, var(--pff-white) 82%, var(--pff-brand));
    --pff-surface-2: color-mix(in srgb, var(--pff-ink) 88%, var(--pff-brand));
    --pff-line: color-mix(in srgb, var(--pff-brand) 42%, transparent);
    --pff-rule-faint: color-mix(in srgb, var(--pff-white) 10%, transparent);
    --pff-rule-faint-strong: color-mix(in srgb, var(--pff-white) 12%, transparent);
  }
}

@media (min-width: 2200px) {
  :root {
    --page-pad: 7rem;
    --page-max: 110rem;
  }
}

@media (prefers-contrast: more) {
  :root {
    --pff-line: var(--pff-brand);
    --pff-text-dim: var(--pff-paper);
    --pff-text-secondary: var(--pff-paper);
  }
}