/* Rose City Rotary design tokens. See DESIGN.md for each token's role. */

:root {
  --paper: #ffffff;
  --mist: #f2f5fa;
  --ink: #142140;
  --muted: #4c5a75;
  --line: #dbe2ee;
  --blue: #1f4e9a;
  --band: #17458f;
  --rose: #ad1a44;
  --on-rose: #ffffff;
  --on-blue: #ffffff;
  --rose-band: #ad1a44;
  --leaf: #22462c;
  --gold: #f7a81b;
  --wine: #3d0f20;
  --blush: #f7e3e7;
  --rr-pink: #f4a6bb;
  --rr-text: #e9c9d2;
  --success: #1f7a4d;
  --warning: #b26a00;
  --error: #ad1a44;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(56px, 9.4vw, 136px);
  --fs-display: clamp(44px, 6.4vw, 92px);
  --fs-h2: clamp(40px, 5.4vw, 76px);
  --fs-h3: clamp(28px, 3vw, 40px);
  --fs-lede: clamp(18px, 1.6vw, 21px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --content: 1240px;

  --r-pill: 999px;
  --r-card: 18px;
  --r-input: 10px;
  --shadow-float: 0 10px 30px -18px rgba(20, 33, 64, .45);
  --ease: cubic-bezier(.16, 1, .3, 1);

  --logo-header: 88px;
  --logo-header-phone: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1328; --mist: #111c38; --ink: #eef2fa; --muted: #a9b4ca; --line: #26355a;
    --blue: #93b4f0; --band: #163f86; --rose: #e45a80; --on-rose: #160710; --on-blue: #0b1328;
    --leaf: #7fb08a; --wine: #2a0915; --blush: #3a1422; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b1328; --mist: #111c38; --ink: #eef2fa; --muted: #a9b4ca; --line: #26355a;
  --blue: #93b4f0; --band: #163f86; --rose: #e45a80; --on-rose: #160710; --on-blue: #0b1328;
  --leaf: #7fb08a; --wine: #2a0915; --blush: #3a1422; color-scheme: dark;
}