/*
 * Jersey Bulls FC — design tokens (v0.1)
 *
 * Source of truth for colour, type, spacing, motion, radius, shadow.
 * Every component CSS uses these — never hard-code values.
 *
 * Pairs with design/08-child-theme-build-plan.md (Track A).
 * Brand red verified from logo SVG; CMYK-derived — sRGB parity check pending.
 * Typography Option B locked per design/09-typography-pairings.md + log 2026-05-21.
 */

:root {
	/* ============================================================
	 * COLOUR — Bulls red + supporting scale + semantic tokens
	 * ============================================================ */

	--c-bulls-red-50:  #fff1f2;
	--c-bulls-red-100: #ffe1e3;
	--c-bulls-red-200: #ffc7cb;
	--c-bulls-red-300: #ff9ea4;
	--c-bulls-red-400: #fb6770;
	--c-bulls-red-500: #ef3641;
	--c-bulls-red-600: #dc0f17;   /* PRIMARY — extracted from logo SVG */
	--c-bulls-red-700: #b80b13;
	--c-bulls-red-800: #960912;
	--c-bulls-red-900: #7a0d13;
	--c-bulls-red:     var(--c-bulls-red-600);
	--c-bulls-red-12:  rgba(220, 15, 23, 0.12);  /* brand-red 12% wash — notices/highlights */

	/* Neutrals — darkest tones calibrated to Juventus's warm near-black canvas
	   (#151515 on juventus.com) rather than a cold pure-black. */
	--c-ink-900:  #141414;
	--c-ink-800:  #1d1d1d;
	--c-ink-700:  #2e2e2e;
	--c-ink-600:  #4a4a4a;
	--c-ink-500:  #6e6e6e;
	--c-ink-400:  #9a9a9a;
	--c-ink-300:  #c4c4c4;
	--c-ink-200:  #e2e2e2;
	--c-ink-100:  #f1f1f1;
	--c-ink-50:   #fafafa;
	--c-white:    #ffffff;
	--c-black:    #000000;

	/* White alphas — for text/borders/scrims over dark or brand surfaces.
	   Use these instead of inline rgba(255,255,255,…) so opacity stays consistent. */
	--c-white-82: rgba(255, 255, 255, 0.82);
	--c-white-50: rgba(255, 255, 255, 0.50);
	--c-white-18: rgba(255, 255, 255, 0.18);
	--c-white-08: rgba(255, 255, 255, 0.08);

	/* Black alphas — washes/scrims over LIGHT surfaces (light-mode hovers etc.).
	   Mirror of the white alphas so the light layer needn't fall back to raw rgba(0,0,0,…). */
	--c-black-10: rgba(0, 0, 0, 0.10);
	--c-black-05: rgba(0, 0, 0, 0.05);

	/* Semantic */
	--c-text:           var(--c-ink-900);
	--c-text-muted:     var(--c-ink-600);
	--c-text-inverse:   var(--c-white);
	--c-surface:        var(--c-white);
	--c-surface-muted:  var(--c-ink-50);
	--c-surface-dark:   var(--c-ink-900);
	--c-border:         var(--c-ink-200);
	--c-accent:         var(--c-bulls-red);
	--c-focus-ring:     var(--c-bulls-red);   /* brand red (was red-400 #fb6770 — an off-brand coral; client 13 Jun: focus ring must match the site red) */
	--c-success:        #0d8a4e;
	--c-warning:        #b87800;
	--c-danger:         var(--c-bulls-red-700);
	--c-card-yellow:    #e8b800;   /* football yellow card (a red card = --c-bulls-red) */

	/* ------------------------------------------------------------
	 * THEME SURFACES — dark by default; `html.theme-light` remaps these
	 * (see css/components/theme-light.css). Components that should flip
	 * between light and dark reference THESE tokens instead of raw scale
	 * tokens, so light mode derives automatically — no per-component
	 * override needed. Cinematic components (hero, player cut-outs, the
	 * match band) deliberately keep raw tokens and stay dark in both modes.
	 * Dark defaults equal the previous hard-coded values, so dark is unchanged.
	 * ------------------------------------------------------------ */
	--t-canvas:        var(--c-ink-900);   /* page background */
	--t-panel:         var(--c-ink-800);   /* cards / raised surfaces */
	--t-header:        var(--c-ink-900);   /* site header bar */
	--t-footer:        var(--c-ink-900);   /* site footer */
	--t-border:        var(--c-white-08);  /* hairline border on theme surfaces */
	--t-border-strong: var(--c-white-18);
	--t-fg:            var(--c-white);      /* primary text on theme surfaces */
	--t-fg-muted:      var(--c-white-50);   /* secondary text */
	--t-fg-faint:      var(--c-ink-400);    /* faint text — dashes, timestamps */
	--t-fg-body:       var(--c-white-82);   /* long-form prose / leads */

	/* ============================================================
	 * TYPOGRAPHY — Juventus/PSG-inspired premium-geometric direction
	 *   Display: Evogria (7NTypes) — self-hosted woff2 in css/fonts.css.
	 *            ⚠️ personal-use licence — commercial licence required before public
	 *            launch (author: c7nazara@gmail.com); licence-clean fallback = Clash Display.
	 *   Body:    Roboto, Helvetica, Arial (the Juventus body stack) — base 20px
	 *   Labels:  Zalando Sans (match data / eyebrows / labels) — replaced IBM Plex
	 *            Mono 2026-06-13. Use `font-variant-numeric: tabular-nums` on scores
	 *            (it is proportional, not monospaced) so score columns stay aligned.
	 * ============================================================ */

	--ff-display: "Evogria", "Arial Narrow", system-ui, sans-serif;
	--ff-sans:    "Roboto", Helvetica, Arial, sans-serif;
	--ff-mono:    "Zalando Sans", "Helvetica Neue", Arial, sans-serif;

	/* Scale — fluid-friendly, modular */
	--fs-25:   0.625rem;   /* 10px micro-caps — sub-caption tags/labels */
	--fs-50:   0.75rem;    /* 12px caption */
	--fs-75:   0.875rem;   /* 14px small */
	--fs-100:  1rem;       /* 16px body */
	--fs-200:  1.125rem;   /* 18px body-lg */
	--fs-300:  1.25rem;    /* 20px h6 */
	--fs-400:  1.5rem;     /* 24px h5 */
	--fs-500:  1.875rem;   /* 30px h4 */
	--fs-600:  2.25rem;    /* 36px h3 */
	--fs-700:  3rem;       /* 48px h2 */
	--fs-800:  4rem;       /* 64px h1 */
	--fs-900:  6rem;       /* 96px display */
	--fs-1000: 8rem;       /* 128px hero */

	--lh-display-tight: 0.86;  /* uppercase display headings — very tight */
	--lh-display: 0.92;        /* uppercase display headings — standard */
	--lh-tight:  1.05;
	--lh-snug:   1.2;
	--lh-base:   1.5;
	--lh-loose:  1.7;

	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;
	--fw-black:    900;

	--ls-tight:  -0.02em;
	--ls-snug:   -0.01em;
	--ls-base:   0;
	--ls-wide:   0.04em;
	--ls-wider:  0.08em;

	/* ============================================================
	 * SPACING — 4/8/16/24/32/48/64/96 (from wireframes)
	 * ============================================================ */

	--space-1:  0.25rem;   /* 4px */
	--space-2:  0.5rem;    /* 8px */
	--space-3:  0.75rem;   /* 12px */
	--space-4:  1rem;      /* 16px */
	--space-5:  1.5rem;    /* 24px */
	--space-6:  2rem;      /* 32px */
	--space-7:  2.5rem;    /* 40px — fills the 32→48 gap (was referenced in site-nav but undefined) */
	--space-8:  3rem;      /* 48px */
	--space-10: 4rem;      /* 64px */
	--space-12: 5rem;      /* 80px */
	--space-16: 6rem;      /* 96px */
	--space-20: 8rem;      /* 128px */

	/* ============================================================
	 * RADIUS, SHADOW, MOTION
	 * ============================================================ */

	--radius-sm:   4px;
	--radius-base: 6px;
	/* 2026-06-10 (client): corners are BACK — one consistent rounding rule for any
	   square element. --radius-md = buttons/chips/controls, --radius-lg = cards/media. */
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-pill: 999px;

	--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-2: 0 4px 8px rgba(0, 0, 0, 0.08);
	--shadow-3: 0 12px 24px rgba(0, 0, 0, 0.12);
	--shadow-4: 0 20px 44px rgba(0, 0, 0, 0.18);            /* mega-panels, overlays */
	--shadow-lift: 0 16px 32px rgba(10, 10, 10, 0.18);      /* card hover elevation */

	/* Watermark opacities — oversized crest/number behind content. */
	--opacity-watermark:        0.08;
	--opacity-watermark-strong: 0.16;

	--motion-fast:   140ms;
	--motion-base:   300ms;   /* Juventus's 0.3s hover/state workhorse */
	--motion-slow:   450ms;
	--motion-slower: 700ms;   /* media reveals, drawer slide — luxurious, Juve-paced */
	--ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
	--ease-emphasis: cubic-bezier(0.2, 0, 0, 1);   /* Juve/PSG-style decisive media motion */

	/* ============================================================
	 * LAYOUT — content widths, breakpoints (reference only)
	 * ============================================================ */

	--content-narrow: 640px;
	--content-base:   960px;
	--content-wide:   1200px;
	--content-full:   1440px;

	/* Breakpoints — reference values (CSS media queries can't read vars; these
	   document the canonical thresholds so every component uses the same ones).
	   --bp-sm 600px · --bp-md 768px · --bp-lg 1024px · --bp-xl 1440px */
	--bp-sm: 600px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1440px;

	/* Shared horizontal inset — every component container uses this so
	   gutters stay consistent edge to edge. */
	--gutter:    var(--space-5);   /* 24px */
	--gutter-sm: var(--space-4);   /* 16px — mobile */

	/* ============================================================
	 * MEDIA — scrims, overlays, gradients, aspect ratios
	 *   Supports the video/photography-led heroes and image cards
	 *   adapted from the Juventus/PSG teardown (see design-research/).
	 * ============================================================ */

	/* Scrims — layered over photography/video so text stays legible.
	   Bottom scrim = text anchored to the lower edge (card overlay, hero).
	   Side scrim = hero text left-aligned over a full-bleed image. */
	--scrim-bottom: linear-gradient(
		to top,
		rgba(10, 10, 10, 0.85) 0%,
		rgba(10, 10, 10, 0.55) 35%,
		rgba(10, 10, 10, 0) 75%
	);
	--scrim-full: linear-gradient(
		to top,
		rgba(10, 10, 10, 0.80) 0%,
		rgba(10, 10, 10, 0.45) 50%,
		rgba(10, 10, 10, 0.65) 100%
	);
	--scrim-left: linear-gradient(
		to right,
		rgba(10, 10, 10, 0.85) 0%,
		rgba(10, 10, 10, 0.55) 40%,
		rgba(10, 10, 10, 0) 80%
	);
	--overlay-ink: rgba(10, 10, 10, 0.55);
	/* Denser bottom scrim for editorial cards / article hero (was inlined per-component as
	   rgba(6,6,6,…)) — converged onto the 10,10,10 scrim family with a darker base stop. */
	--scrim-bottom-strong: linear-gradient(
		to top,
		rgba(10, 10, 10, 0.92) 0%,
		rgba(10, 10, 10, 0.55) 45%,
		rgba(10, 10, 10, 0) 80%
	);

	/* Brand gradients — placeholder media blocks + accent fills. */
	--grad-red: linear-gradient(135deg, var(--c-bulls-red-600) 0%, var(--c-bulls-red-800) 100%);
	--grad-ink: linear-gradient(160deg, var(--c-ink-900) 0%, var(--c-ink-800) 100%);

	/* Player-card surface — a top spotlight fading to a deep base so the cut-out
	   figure pops and the lower scrim/nameplate reads. Juve/PSG portrait treatment. */
	--grad-red-card: radial-gradient(120% 80% at 50% 0%, var(--c-bulls-red-500) 0%, var(--c-bulls-red-700) 45%, var(--c-bulls-red-900) 100%);
	--grad-ink-card: radial-gradient(120% 80% at 50% 0%, var(--c-ink-700) 0%, var(--c-ink-800) 45%, var(--c-ink-900) 100%);

	/* Aspect ratios — keep media wrappers consistent across components. */
	--ar-video:  16 / 9;
	--ar-wide:   21 / 9;
	--ar-card:   3 / 4;
	--ar-portrait: 5 / 8;   /* Juventus showcase cards measure 316x500 (0.63) */
	--ar-square: 1 / 1;

	/* ============================================================
	 * Z-INDEX — single scale so layering stays predictable
	 * ============================================================ */

	--z-header:  500;
	--z-cookie:  700;   /* cookie consent toast — above header, below the nav overlay */
	--z-overlay: 800;   /* drawer scrim */
	--z-drawer:  900;   /* off-canvas mobile nav */
	--z-skip:    1000;  /* skip link — always on top */
}