/* Sunny Side Cycling — design tokens. Source of truth: brand/tokens.json. */

@font-face { font-family: "DynaPuff"; src: url("../fonts/DynaPuff-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DynaPuff"; src: url("../fonts/DynaPuff-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DynaPuff"; src: url("../fonts/DynaPuff-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DynaPuff"; src: url("../fonts/DynaPuff-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/Lexend-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/Lexend-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/Lexend-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/Lexend-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --surface: #fff9e6;
  --surface-warm: #fef0d0;
  --surface-raised: #ffffff;
  --ink: #00191a;
  --ink-muted: #4a5f5e;
  --accent-text: #125653;
  --display-accent: #358e8c;
  --line: #e7e2c9;
  --control-border: #358e8c;
  --focus: #00191a;
  --fill-primary: #ffd37b;
  --on-primary: #00191a;
  --cream: #fff9e6;
  --sun: #ffd37b;
  --soca: #358e8c;
  --valley: #125653;
  --night: #00191a;
  --sand: #fef0d0;
  --trail: #f2c062;
  --mint: #afd2c9;
  --glacier: #cbe8d9;
  --sage: #67a99f;
  --pine: #276561;
  --shadow-tile: 6px 8px 16px rgba(0, 25, 26, 0.16);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --font-display: "DynaPuff", "Lexend", system-ui, sans-serif;
  --font-text: "Lexend", system-ui, sans-serif;
}

/* Valley (dark) theme: on <html data-theme="dark">, or locally on any band with .ss-dark (footer, dark sections). */
[data-theme="dark"], .ss-dark {
  --surface: #125653;
  --surface-warm: #0e4744;
  --surface-raised: #0b3d3b;
  --ink: #fff9e6;
  --ink-muted: #cbe8d9;
  --accent-text: #ffd37b;
  --display-accent: #ffd37b;
  --line: #2a6a66;
  --control-border: #9fd6bd;
  --focus: #ffd37b;
  --shadow-tile: 8px 10px 18px rgba(0, 25, 26, 0.45);
}

/* Type styles */
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 68px; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; }
.display-l { font-family: var(--font-display); font-size: 48px; line-height: 48px; font-weight: 700; letter-spacing: 0.01em; }
.display-m { font-family: var(--font-display); font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: 0.005em; }
.headline { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.title { font-family: var(--font-text); font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: 0; }
.body-l { font-family: var(--font-text); font-size: 18px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
.body { font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; }
.small { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; }
.label { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }