/* Peptide City design tokens. Light is the default, dark is [data-theme="dark"]. */
:root {
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  --paper: #f4f1e8;
  --paper-2: #ebe6d9;
  --card: #fffdf8;
  --ink: #12150f;
  --body: #3a3f33;
  --muted: #666b5d;
  --stroke: #12150f;
  --line: rgba(18, 21, 15, 0.14);
  --shadow-c: #12150f;

  --accent: #ff6a45;
  --accent-text: #bf3512;
  --on-accent: #12150f;
  --sun: #ffd24a;

  --sky: #cfe3ee;
  --blush: #f8d6c8;
  --sage: #d9e6cf;
  --sand: #efe2c2;

  --bar: #12150f;
  --bar-text: #f4f1e8;
  --danger: #b3261e;
  --ok: #1f7a4d;

  --radius: 22px;
  --radius-sm: 14px;
  --container: 1240px;
  --header-h: 72px;
  --img-filter: none;

  /* Layered page background: three light pools + faded 45° hatch pinstripes (masked to two corners). */
  --pool-1: rgba(255, 106, 69, 0.17);
  --pool-2: rgba(255, 210, 74, 0.24);
  --pool-3: rgba(150, 196, 222, 0.30);
  --hatch: rgba(18, 21, 15, 0.075);
  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #15110e;
  --paper-2: #1c1713;
  --card: #211b17;
  --ink: #f3efe4;
  --body: #cfcabb;
  --muted: #9a9484;
  --stroke: rgba(243, 239, 228, 0.7);
  --line: rgba(243, 239, 228, 0.14);
  --shadow-c: rgba(243, 239, 228, 0.22);

  --accent: #ff7d5c;
  --accent-text: #ff9b80;
  --on-accent: #12150f;

  --sky: #14232c;
  --blush: #2d1d17;
  --sage: #26231a;
  --sand: #2a2516;

  --bar: #0c0a08;
  --bar-text: #f3efe4;
  --danger: #ff8a80;
  --ok: #7fd6a4;
  --img-filter: brightness(0.86) saturate(0.92);

  --pool-1: rgba(255, 125, 92, 0.13);
  --pool-2: rgba(255, 210, 74, 0.07);
  --pool-3: rgba(86, 140, 186, 0.16);
  --hatch: rgba(243, 239, 228, 0.06);
  color-scheme: dark;
}