/* Mountain Empire Rotary Club — generated from tokens.json (design system) */

:root {
  /* Rotary palette: pure forms only, never tinted or blended */
  --royal-blue: #17458f;
  --gold: #f7a81b;
  --azure: #0067c8;
  --sky-blue: #00a2e0;
  --cranberry: #d41367;
  --cardinal: #e02927;
  --turquoise: #00adbb;
  --orange: #ff7600;
  --violet: #901f93;
  --grass: #009739;
  --powder-blue: #b9d9eb;
  --moss: #a7aca2;
  --lavender: #c6bcd0;
  --taupe: #d9c89e;
  --stone: #9ba4b4;
  --slate: #657f99;
  --charcoal: #54565a;
  --pewter: #898a8d;
  --smoke: #b1b1b1;
  --silver: #d0cfcd;
  --white: #ffffff;
  --black: #000000;
  --storm: #7a6e66;
  --ash: #968b83;
  --platinum: #bfb7b0;
  --cloud: #d6d1ca;

  /* Roles, light theme */
  --surface-100: var(--white);
  --surface-200: var(--cloud);
  --surface-sand: var(--taupe);
  --surface-brand: var(--royal-blue);
  --ink: var(--black);
  --ink-muted: var(--charcoal);
  --on-brand: var(--white);
  --on-gold: var(--royal-blue);
  --link: var(--royal-blue);
  --action: var(--royal-blue);
  --on-action: var(--white);
  --border: var(--pewter);
  --border-subtle: var(--silver);
  --focus-ring: var(--azure);
  --danger: var(--cardinal);
  --on-danger: var(--white);
  --success: var(--grass);
  --on-success: var(--black);
  --warning: var(--orange);
  --on-warning: var(--black);
  --info: var(--azure);
  --on-info: var(--white);

  /* Type */
  --font-sans: "Frutiger", "Open Sans", Arial, sans-serif;
  --font-serif: Sentinel, Georgia, serif;

  /* Space (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Dark theme: opt in with data-theme="dark" on <html> */
[data-theme="dark"] {
  --surface-100: var(--black);
  --surface-200: var(--charcoal);
  --surface-sand: var(--charcoal);
  --ink: var(--white);
  --ink-muted: var(--silver);
  --link: var(--powder-blue);
  --action: var(--gold);
  --on-action: var(--black);
  --border-subtle: var(--charcoal);
  --focus-ring: var(--gold);
  --shadow-raised: none;
}

/* Type styles, by name */
.display { font-family: var(--font-sans); font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-sans); font-size: 40px; line-height: 46px; font-weight: 700; }
.h2 { font-family: var(--font-sans); font-size: 30px; line-height: 36px; font-weight: 700; }
.h3 { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 700; }
.nav { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.label { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0.01em; }
.subhead { font-family: var(--font-serif); font-size: 22px; line-height: 32px; font-weight: 400; }
.body-lg { font-family: var(--font-serif); font-size: 19px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-serif); font-size: 17px; line-height: 27px; font-weight: 400; }
.caption { font-family: var(--font-serif); font-size: 14px; line-height: 20px; font-weight: 400; }