/* PeePeePooPoo. Source: PeePeeSite/style.css and references/beta-account/styles.css.
   Local assets, Russo One, existing olive / cream / gold palette. */
@font-face {
  font-family: "Russo One";
  src: url("assets/russo-one.5e96e3bd0963.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

:root {
  color-scheme: dark;
  --color-bg: #171d13;
  --color-surface: #1c2817;
  --color-surface-raised: #24301c;
  --color-surface-hover: #2c3b22;
  --color-input: #20291b;
  --color-cream: #fff1cb;
  --color-text: #dbe2cd;
  --color-muted: #bdc4aa;
  --color-subtle: #9db18a;
  --color-gold: #ffcd59;
  --color-focus: var(--color-gold);
  --color-border: #839773;
  --color-divider: #536548;
  --color-success: #bfda95;
  --color-warning: var(--color-gold);
  --color-error: #ffd28b;
  --color-disabled: #a3b092;
  --color-disabled-bg: #20291b;
  --color-wood-label: #fff1cb;
  --color-wood-backdrop: #301907;
  --color-wood-shadow: #713c0d;
  --color-shadow: #03090255;
  --color-transparent: transparent;
  --color-inverse: #171d13;

  --font-display: "Russo One", Arial, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --font-code: Consolas, "Courier New", monospace;
  --font-weight-normal: 400;
  --font-weight-strong: 700;
  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text-label: clamp(.875rem, 1vw, 1rem);
  --text-body: clamp(1.125rem, 1.25vw, 1.4375rem);
  --text-control: clamp(1.125rem, 1.2vw, 1.375rem);
  --text-button: clamp(1rem, 1.2vw, 1.375rem);
  --text-lead: clamp(1.25rem, 1.75vw, 1.875rem);
  --text-h3: clamp(1.375rem, 1.8vw, 2rem);
  --text-h2: clamp(1.75rem, 2.8vw, 3rem);
  --text-showcase-title: clamp(2rem, 3.6vw, 4rem);
  --space-showcase-section: clamp(3rem, 4vw, 4.5rem);
  --text-h1: clamp(2rem, 4.4vw, 5rem);
  --line-body: 1.7;
  --line-control: 1.5;
  --line-heading: 1.12;
  --tracking-heading: -.025em;
  --tracking-label: .045em;
  --tracking-eyebrow: .12em;

  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-gutter: clamp(1.25rem, 4.5vw, 5.625rem);
  --space-section: clamp(3rem, 6vw, 6.5rem);
  --space-state-gap: clamp(1.25rem, 2vw, 2rem);

  --width-full: 100%;
  --width-half: 50%;
  --width-content: 112.5rem;
  --width-reading: 47rem;
  --width-state-min: 13rem;
  --width-card-min: 17rem;
  --width-form-min: 17rem;
  --width-logo: clamp(10rem, 18vw, 18.75rem);
  --width-logo-footer: 11.25rem;
  --height-control: 4rem;
  --height-button: 5.375rem;
  --height-target: 2.75rem;
  --height-textarea: 9rem;
  --height-art: 66rem;
  --size-checkbox: 1.375rem;
  --size-check-width: .375rem;
  --size-check-height: .6875rem;
  --size-step: 2.75rem;
  --size-dot: .5rem;
  --size-sr: 1px;
  --aspect-card: 16 / 9;

  --border-thin: 1px;
  --border-control: 2px;
  --border-focus: 3px;
  --focus-offset: 4px;
  --radius-none: 0;
  --radius-pill: 999px;
  --radius-round: 50%;
  --shadow-heading: 0 5px 18px var(--color-shadow);
  --shadow-button-text: 0 2px var(--color-wood-shadow);
  --shadow-wood-label: 0 0 8px 6px var(--color-wood-backdrop);
  --shadow-card: 0 12px 32px var(--color-shadow);
  --shadow-state-hover: inset 0 -2px var(--color-gold);

  --image-button: url("assets/wood.0d6e2e3fd763.webp");
  --image-button-hover: url("assets/hover.bc99cece0fc6.webp");
  --button-label-inset: .25rem;
  --button-min: 10rem;
  --opacity-art: .12;
  --opacity-visible: 1;
  --opacity-hidden: 0;
  --duration-fast: 150ms;
  --duration-none: 0ms;
  --ease-ui: ease;
  --z-art: -1;
  --z-content: 0;
  --z-focus: 2;
  --offset-hidden: -200vh;
  --offset-press: 2px;
  --scale-check: 45deg;
  --ratio-grid: 1fr;
  --flex-grow: 1;
  --grid-intro: 1.2fr .8fr;
  --height-page: 100svh;
  --color-forced-bg: ButtonFace;
  --color-forced-text: ButtonText;
}