/* ==========================================================================
   EriStars design tokens
   Colors are sampled from the official club logo (assets/images/logo.png).
   Change values here; every page and component reads from these variables.
   ========================================================================== */

:root {
  /* ---- Brand (from the logo) ---- */
  --brand-green: #12ad2b;        /* "Stars" wordmark green: accents on dark backgrounds */
  --brand-green-700: #0b7a1f;    /* AA-contrast green for buttons & text on light backgrounds */
  --brand-green-800: #086418;    /* hover / pressed */
  --brand-red: #eb0438;          /* "Eri" wordmark red: used sparingly */
  --brand-red-700: #c4022e;
  --brand-blue: #4189dd;         /* ball / flag blue: identity stripe only */

  /* ---- Neutrals ---- */
  --ink-950: #0b0d0f;            /* deepest background */
  --ink-900: #111417;            /* primary dark surface */
  --ink-800: #1a1e22;
  --ink-700: #2a3036;
  --gray-600: #555c63;           /* supporting text on light (AA on white & paper) */
  --gray-500: #6b7279;
  --gray-400: #9aa1a8;           /* supporting text on dark */
  --gray-300: #c9ced3;
  --gray-200: #e3e6e9;
  --gray-100: #eef0f2;
  --paper: #f6f6f3;              /* soft off-white section background */
  --white: #ffffff;

  /* ---- Semantic ---- */
  --text: var(--ink-900);
  --text-muted: var(--gray-600);
  --text-on-dark: #f3f4f5;
  --text-on-dark-muted: var(--gray-400);
  --surface: var(--white);
  --surface-alt: var(--paper);
  --surface-dark: var(--ink-900);
  --border: var(--gray-200);
  --border-dark: rgba(255, 255, 255, 0.12);
  --focus: #3b8cff;

  /* ---- Typography ---- */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-hero: clamp(3.4rem, 1.6rem + 8vw, 8.5rem);
  --fs-h1: clamp(2.75rem, 1.7rem + 4.4vw, 5.25rem);
  --fs-h2: clamp(2.2rem, 1.5rem + 2.8vw, 3.75rem);
  --fs-h3: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  --fs-h4: 1.2rem;
  --fs-lead: clamp(1.075rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;

  /* ---- Spacing (8pt scale) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-h: 72px;

  /* ---- Shape & motion ---- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(11, 13, 15, 0.06), 0 2px 8px rgba(11, 13, 15, 0.06);
  --shadow: 0 10px 30px -12px rgba(11, 13, 15, 0.28);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;
}

@media (min-width: 1024px) {
  :root { --header-h: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}