/* ==============================================================
   xSyte Design System — TOKENS
   Synced verbatim from the design-system bundle:
     design-system/tokens/{fonts,colors,typography,spacing,effects}.css
   To re-sync when the design system updates, replace the sections
   below wholesale. The ONLY local edit is the @font-face src paths,
   which are absolute (/assets/fonts/...) for this repo's layout.
   ============================================================== */

/* ---------- tokens/fonts.css ---------- */
/* ============================================================
   xSyte — Fonts
   Display face: Francois One (condensed grotesque, headings).
   Body: Arial / Helvetica system stack — authentic to the
   production site (Foundation $body-font-family).
   FontAwesome shipped for icon glyphs (see effects.css / ICONOGRAPHY).
   ============================================================ */

@font-face {
  font-family: "Francois One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Francois One Regular"), local("FrancoisOne-Regular"),
       url("/assets/fonts/francois_one.woff2") format("woff2"),
       url("/assets/fonts/francois_one.woff") format("woff");
}

@font-face {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  font-display: block;
  src: url("/assets/fonts/fontawesome-webfont.woff") format("woff"),
       url("/assets/fonts/fontawesome-webfont.ttf") format("truetype");
}

/* ---------- tokens/colors.css ---------- */
/* ============================================================
   xSyte — Color tokens
   Navy is the brand. Red is the accent. A bright interactive
   blue handles links & primary CTAs (drawn from the live site).
   Base palette → semantic aliases below.
   ============================================================ */
:root {
  /* --- Brand: Navy (primary) --- */
  --navy-900: #021130;
  --navy-800: #031841;
  --navy-700: #042155;   /* CORE brand navy — the logo mark */
  --navy-600: #0a2f6e;
  --navy-500: #143d84;
  --navy-400: #2f5aa3;
  --navy-300: #6d8bc0;
  --navy-100: #d7dfee;
  --navy-050: #eef2f8;

  /* --- Accent: Red --- */
  --red-700: #a30000;
  --red-600: #cc0000;    /* xSyte accent red */
  --red-500: #e01414;
  --red-100: #ffe0e0;

  /* --- Interactive blue (links, some CTAs) --- */
  --blue-600: #1276c4;
  --blue-500: #2199e8;   /* Foundation primary — live-site CTA blue */
  --blue-100: #d4ecfb;

  /* --- Neutrals --- */
  --white: #ffffff;
  --paper: #f4f5f7;      /* section wash */
  --gray-100: #ededed;   /* card fill */
  --gray-200: #e6e6e6;
  --gray-300: #cacaca;
  --gray-400: #8a8a8a;
  --gray-600: #555555;
  --gray-800: #333333;   /* footer / dark UI */
  --ink: #0a0a0a;        /* body text */

  /* --- Semantic status --- */
  --success: #3adb76;
  --warning: #ffae00;
  --alert:   #ec5840;

  /* --- Sport sub-brand theme colors (from production _settings.scss) --- */
  --sport-hockey:    #002752;
  --sport-lacrosse:  #cc6311;
  --sport-soccer:    #136612;
  --sport-waterpolo: #1a56cc;
  --sport-handball:  #cc0000;

  /* ==========================================================
     Semantic aliases — reference these in components
     ========================================================== */
  --color-brand:            var(--navy-700);
  --color-brand-dark:       var(--navy-900);
  --color-accent:           var(--red-600);
  --color-accent-dark:      var(--red-700);
  --color-interactive:      var(--blue-500);
  --color-interactive-dark: var(--blue-600);

  --surface-page:      var(--white);
  --surface-muted:     var(--paper);
  --surface-card:      var(--white);
  --surface-card-soft: var(--gray-100);
  --surface-dark:      var(--navy-700);
  --surface-footer:    var(--gray-800);

  --text-heading:   var(--navy-700);
  --text-body:      var(--ink);
  --text-muted:     var(--gray-400);
  --text-on-dark:   var(--white);
  --text-on-dark-muted: rgba(255,255,255,0.72);

  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);

  --link:           var(--blue-500);
  --link-hover:     var(--blue-600);
  --focus-ring:     rgba(33,153,232,0.45);
}

/* ---------- tokens/typography.css ---------- */
/* ============================================================
   xSyte — Typography tokens
   Display: Francois One. Body: Arial/Helvetica.
   Header sizes mirror Foundation $header-sizes (medium bp).
   ============================================================ */
:root {
  --font-display: "Francois One", "Arial Narrow", sans-serif;
  --font-body: Arial, Helvetica, "Helvetica Neue", sans-serif;
  --font-mono: Consolas, "Liberation Mono", Courier, monospace;

  /* Type scale (px → rem @16) */
  --fs-h1: 3rem;      /* 48 */
  --fs-h2: 2.5rem;    /* 40 */
  --fs-h3: 1.9375rem; /* 31 */
  --fs-h4: 1.5625rem; /* 25 */
  --fs-h5: 1.25rem;   /* 20 */
  --fs-h6: 1rem;      /* 16 */
  --fs-lead: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  /* Weights */
  --fw-normal: 400; /* @kind other */
  --fw-bold: 700; /* @kind other */

  /* Line heights */
  --lh-heading: 1.15; /* @kind other */
  --lh-body: 1.6; /* @kind other */

  /* Letter spacing */
  --ls-eyebrow: 0.14em;
  --ls-tight: -0.01em;
}

/* ---------- tokens/spacing.css ---------- */
/* ============================================================
   xSyte — Spacing & layout tokens
   1rem base rhythm (Foundation $global-margin/padding = 1rem).
   ============================================================ */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;

  --container-max: 75rem;   /* 1200px content width */
  --container-wide: 90rem;  /* 1440px */
  --gutter: 1.875rem;       /* 30px grid gutter */

  --section-pad-y: 4rem;
}

/* ---------- tokens/effects.css ---------- */
/* ============================================================
   xSyte — Effects: radii, borders, shadows, motion
   Corners are restrained: buttons 3px, cards ~10px, chrome
   square-ish. Shadows are soft and low. Transitions ease-out.
   ============================================================ */
:root {
  /* Radii */
  --radius-none: 0;
  --radius-sm: 3px;     /* buttons */
  --radius-md: 5px;     /* inputs, small cards, quotes */
  --radius-lg: 10px;    /* feature cards */
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--border-subtle);
  --border-card: 1px solid var(--border-subtle);

  /* Shadows — soft, low-elevation */
  --shadow-btn: 0 1px 2px rgba(4,33,85,0.18);
  --shadow-sm: 0 1px 3px rgba(4,33,85,0.10);
  --shadow-card: 0 6px 20px rgba(4,33,85,0.10);
  --shadow-lg: 0 16px 44px rgba(4,33,85,0.18);
  --shadow-inset-input: inset 0 1px 2px rgba(10,10,10,0.10);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --dur-fast: 0.15s; /* @kind other */
  --dur: 0.25s; /* @kind other */

  /* Dark overlay wash used over hero photography */
  --scrim: rgba(4,33,85,0.62);
}