/* SportsWatch — brand tokens (from the Claude Design system handoff).
 * Self-hosted fonts + design tokens + section schemes. Loaded on the public
 * marketing pages (and anywhere the .sw-root brand surface is used).
 */

/* ---- Webfonts (self-hosted woff2; do not load from Google CDN) ---- */
@font-face { font-family:"Merriweather"; font-style:normal; font-weight:300; font-display:swap; src:url("/assets/fonts/merriweather-300.woff2") format("woff2"); }
@font-face { font-family:"Merriweather"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/merriweather-400.woff2") format("woff2"); }
@font-face { font-family:"Merriweather"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/merriweather-700.woff2") format("woff2"); }
@font-face { font-family:"Merriweather"; font-style:normal; font-weight:900; font-display:swap; src:url("/assets/fonts/merriweather-900.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:300; font-display:swap; src:url("/assets/fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/poppins-700.woff2") format("woff2"); }

:root {
  /* Neutral ramp */
  --color-white:#ffffff;
  --color-neutral-lightest:#f2f2f2;
  --color-neutral-lighter:#dadada;
  --color-neutral-light:#b5b5b5;
  --color-neutral:#848484;
  --color-neutral-dark:#525352;
  --color-neutral-darker:#212221;
  --color-neutral-darkest:#090a09;

  /* Curious Blue — primary */
  --color-curious-blue-lightest:#e8f2fc;
  --color-curious-blue-lighter:#d1e6fa;
  --color-curious-blue-light:#5ea8ee;
  --color-curious-blue:#1a83e7;
  --color-curious-blue-dark:#1468b8;
  --color-curious-blue-darker:#0a345c;
  --color-curious-blue-darkest:#072745;

  /* Denim — deep accent */
  --color-denim-lightest:#e6ecfa;
  --color-denim-lighter:#cedaf5;
  --color-denim-light:#547edc;
  --color-denim:#0b47cd;
  --color-denim-dark:#0838a4;
  --color-denim-darker:#041c52;
  --color-denim-darkest:#03153d;

  /* Powder Ash — sage neutral */
  --color-powder-ash-lightest:#f7f8f8;
  --color-powder-ash-lighter:#eff2f1;
  --color-powder-ash-light:#c9d3ce;
  --color-powder-ash:#b3c1b9;
  --color-powder-ash-dark:#8f9a94;
  --color-powder-ash-darker:#474d4a;
  --color-powder-ash-darkest:#353937;

  /* Alpha tints */
  --color-ink-5:color-mix(in srgb, var(--color-neutral-darkest), transparent 95%);
  --color-ink-10:color-mix(in srgb, var(--color-neutral-darkest), transparent 90%);
  --color-ink-15:color-mix(in srgb, var(--color-neutral-darkest), transparent 85%);
  --color-ink-20:color-mix(in srgb, var(--color-neutral-darkest), transparent 80%);
  --color-ink-60:color-mix(in srgb, var(--color-neutral-darkest), transparent 40%);
  --color-white-10:color-mix(in srgb, var(--color-white), transparent 90%);
  --color-white-20:color-mix(in srgb, var(--color-white), transparent 80%);

  /* Semantic aliases */
  --primary:var(--color-curious-blue);
  --primary-hover:var(--color-curious-blue-dark);
  --primary-tint:var(--color-curious-blue-lightest);
  --accent:var(--color-denim);
  --text:var(--color-neutral-darkest);
  --text-muted:var(--color-neutral-dark);
  --text-subtle:var(--color-neutral);
  --text-on-primary:var(--color-white);
  --text-link:var(--color-curious-blue);
  --surface:var(--color-white);
  --surface-tint:var(--color-curious-blue-lightest);
  --surface-muted:var(--color-neutral-lightest);
  --surface-card:var(--color-white);
  --border:var(--color-ink-15);
  --border-strong:var(--color-neutral-darkest);
  --live:#e0353a;

  /* Families / weights */
  --font-heading:"Merriweather", Georgia, "Times New Roman", serif;
  --font-body:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-logo:var(--font-heading);
  --weight-light:300; --weight-regular:400; --weight-medium:500;
  --weight-semibold:600; --weight-bold:700; --weight-black:900;

  /* Type scale (desktop) */
  --text-h1:84px; --text-h2:60px; --text-h3:48px; --text-h4:40px; --text-h5:32px; --text-h6:26px;
  --text-large:26px; --text-medium:20px; --text-regular:18px; --text-small:16px; --text-tiny:12px;

  /* Line heights / tracking */
  --leading-tight:1.1; --leading-heading:1.2; --leading-snug:1.3; --leading-body:1.5;
  --tracking-heading:-0.01em; --tracking-normal:0; --tracking-eyebrow:0.02em;

  /* Spacing / radii / borders / shadows / motion */
  --section-py:112px; --section-px:5%; --container-max:1280px;
  --radius-card:0px; --radius-image:0px; --radius-button:6px; --radius-badge:6px;
  --radius-input:6px; --radius-checkbox:2px; --radius-pill:999px;
  --border-width:1px; --border-hairline:1px solid var(--border); --border-card:1px solid var(--border);
  --shadow-sm:0 1px 2px rgba(9,10,9,.06);
  --shadow-card:0 1px 3px rgba(9,10,9,.08), 0 8px 24px -12px rgba(9,10,9,.12);
  --shadow-pop:0 12px 32px -8px rgba(9,10,9,.18);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:150ms; --duration:200ms; --duration-slow:300ms;
}

@media (max-width: 991px) {
  :root {
    --text-h1:48px; --text-h2:44px; --text-h3:32px; --text-h4:24px; --text-h5:20px; --text-h6:18px;
    --text-large:18px; --text-medium:16px; --text-regular:14px; --text-small:12px; --text-tiny:10px;
  }
}

/* ---- Section schemes (vertical rhythm) ---- */
.scheme-1 { --scheme-bg:var(--color-curious-blue-lightest); --scheme-surface:var(--color-curious-blue-lighter); --scheme-text:var(--color-neutral-darkest); --scheme-border:var(--color-ink-15); background-color:var(--scheme-bg); color:var(--scheme-text); }
.scheme-2 { --scheme-bg:var(--color-white); --scheme-surface:var(--color-neutral-lightest); --scheme-text:var(--color-neutral-darkest); --scheme-border:var(--color-ink-15); background-color:var(--scheme-bg); color:var(--scheme-text); }
.scheme-3 { --scheme-bg:var(--color-neutral-lightest); --scheme-surface:var(--color-white); --scheme-text:var(--color-neutral-darkest); --scheme-border:var(--color-ink-15); background-color:var(--scheme-bg); color:var(--scheme-text); }

/* ---- Brand surface base (scoped so it won't disturb the app UI) ---- */
.sw-root {
  font-family:var(--font-body); font-weight:var(--weight-regular);
  font-size:var(--text-medium); line-height:var(--leading-body);
  color:var(--text); background-color:var(--surface);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.sw-root h1,.sw-root h2,.sw-root h3,.sw-root h4,.sw-root h5,.sw-root h6 {
  font-family:var(--font-heading); font-weight:var(--weight-regular);
  line-height:var(--leading-heading); letter-spacing:var(--tracking-heading);
  color:var(--text); margin:0; text-wrap:balance;
}
.sw-root p { margin:0; text-wrap:pretty; }

.sw-eyebrow { font-family:var(--font-body); font-weight:var(--weight-semibold); font-size:16px; letter-spacing:.02em; color:var(--color-curious-blue); }