/* Domestique Cycling Club — Design Tokens
   Two typefaces only: IBM Plex Sans (display/headlines), Inter (body/labels).
   Colors are named after rider/peloton vocabulary. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* Inter — local brand files (variable fonts: opsz 14–32, wght 100–900) */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand color system ---------- */
  --dcc-nightride:        #2F2F35; /* primary dark, anchor */
  --dcc-breakaway-punch:  #FF0068; /* signature pink */
  --dcc-signal-butter:    #EEFFA6; /* pale yellow-green */
  --dcc-lead-lime:        #CCFF00; /* electric lime — RESERVED for new rides only */
  --dcc-cadence-blush:    #FFC0DE; /* soft pink */
  --dcc-peloton-moss:     #6A9127; /* deep green — Dirt Church */

  /* Neutrals derived from Nightride */
  --dcc-paper:            #F6F5F1; /* warm off-white surface */
  --dcc-bone:             #E8E6DF; /* secondary surface / dividers on light */
  --dcc-ash:              #6E6E76; /* muted text on light */
  --dcc-graphite:         #1A1A1F; /* deepest dark */
  --dcc-white:            #FFFFFF;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1:        var(--dcc-nightride);    /* primary text on light */
  --fg-2:        var(--dcc-ash);          /* secondary / metadata */
  --fg-on-dark: var(--dcc-paper);         /* primary text on Nightride */
  --fg-accent:   var(--dcc-breakaway-punch);
  --bg-1:        var(--dcc-paper);
  --bg-2:        var(--dcc-bone);
  --bg-dark:     var(--dcc-nightride);
  --border-1:    rgba(47, 47, 53, 0.14);
  --border-on-dark: rgba(246, 245, 241, 0.14);

  /* ---------- Type system ---------- */
  --font-display: "IBM Plex Sans", system-ui, sans-serif; /* Bold only at display sizes */
  --font-body:    "Inter", system-ui, sans-serif;

  /* Display weight is always 700 in DCC system */
  --display-weight: 700;

  /* Sentence case is the default for headlines.
     ALL CAPS letter-spaced is reserved for Endurance Series posters,
     section eyebrows and labels. */

  /* ---------- Spacing (4px grid) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --radius-0: 0px;       /* default — DCC favors hard corners */
  --radius-1: 2px;       /* tight corner softening on inputs */
  --radius-2: 4px;       /* small chip / tag */
  --radius-pill: 999px;  /* pills (sparingly) */

  /* ---------- Borders ---------- */
  --hairline: 1px solid var(--border-1);
  --hairline-dark: 1px solid var(--border-on-dark);
  --rule-bold: 2px solid var(--dcc-nightride);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ---------- Element-level semantic styles ---------- */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
}

.eyebrow, .label-caps {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.poster-caps {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

p, .body { font-family: var(--font-body); font-size: 16px; line-height: 1.55; }
.body-lg { font-size: 18px; line-height: 1.5; }
.body-sm { font-size: 14px; line-height: 1.45; }
.meta    { font-family: var(--font-body); font-size: 13px; color: var(--fg-2); }

code, .mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}