/*
 * GSCC Child Theme — Design Tokens
 *
 * All design decisions as CSS custom properties.
 * Edit this file when the brand needs an update — everything else
 * reads from here. Avoid hardcoding values in component CSS.
 */

:root {
	/* ─────────────────────────────────────────────────────────────
	   COLORS
	   Cricket traditional palette: deep navy, cricket gold,
	   cream ground, charcoal text. Confident, editorial.
	   ───────────────────────────────────────────────────────────── */

	/* Primary brand */
	--gscc-navy:           #0B1D3A;  /* Deep navy — primary brand */
	--gscc-navy-dark:      #060F1F;  /* Near-black for contrast */
	--gscc-navy-light:     #1D3A6B;  /* Hover states, links */

	/* Accent */
	--gscc-gold:           #C9A227;  /* Cricket gold — accents, CTAs */
	--gscc-gold-dark:      #8F7318;  /* Pressed buttons, strong accents */
	--gscc-gold-light:     #E0BE4E;  /* Hover highlights */

	/* Neutrals */
	--gscc-cream:          #F7F3EC;  /* Page background */
	--gscc-cream-dark:     #EDE6D6;  /* Cards on cream bg */
	--gscc-ink:            #1E1E1E;  /* Body text */
	--gscc-ink-muted:      #54534E;  /* Secondary text, metadata */
	--gscc-grey:           #8A8578;  /* Warm grey for borders, muted UI */
	--gscc-grey-light:     #D8D4CA;  /* Subtle dividers */

	/* Semantic */
	--gscc-success:        #3F7D5A;  /* Wins, confirmations */
	--gscc-danger:         #B03A2E;  /* Losses, errors */

	/* ─────────────────────────────────────────────────────────────
	   TYPOGRAPHY
	   Playfair Display (serif display) for headings.
	   Work Sans (humanist sans) for body.
	   IBM Plex Mono for scores, dates, fixtures.
	   ───────────────────────────────────────────────────────────── */

	--gscc-font-display:   'Playfair Display', Georgia, 'Times New Roman', serif;
	--gscc-font-body:      'Work Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	--gscc-font-mono:      'IBM Plex Mono', 'Courier New', monospace;

	/* Type scale — modular scale (1.25 ratio). Tune if needed. */
	--gscc-text-xs:        0.75rem;    /* 12px — captions */
	--gscc-text-sm:        0.875rem;   /* 14px — metadata */
	--gscc-text-base:      1rem;       /* 16px — body */
	--gscc-text-lg:        1.25rem;    /* 20px — lead */
	--gscc-text-xl:        1.5rem;     /* 24px — h4 */
	--gscc-text-2xl:       2rem;       /* 32px — h3 */
	--gscc-text-3xl:       2.75rem;    /* 44px — h2 */
	--gscc-text-4xl:       3.75rem;    /* 60px — h1 */
	--gscc-text-hero:      5rem;       /* 80px — hero display */

	/* Weights */
	--gscc-weight-regular: 400;
	--gscc-weight-medium:  500;
	--gscc-weight-semi:    600;
	--gscc-weight-bold:    700;
	--gscc-weight-black:   800;

	/* Line heights */
	--gscc-lh-tight:       1.1;
	--gscc-lh-snug:        1.25;
	--gscc-lh-normal:      1.5;
	--gscc-lh-relaxed:     1.7;

	/* Letter spacing */
	--gscc-tracking-tight: -0.02em;
	--gscc-tracking-normal: 0;
	--gscc-tracking-wide:  0.02em;
	--gscc-tracking-caps:  0.08em;  /* For ALL CAPS labels */

	/* ─────────────────────────────────────────────────────────────
	   SPACING
	   Consistent rhythm. Use these, never raw pixel values.
	   ───────────────────────────────────────────────────────────── */

	--gscc-space-1:        0.25rem;   /* 4px */
	--gscc-space-2:        0.5rem;    /* 8px */
	--gscc-space-3:        0.75rem;   /* 12px */
	--gscc-space-4:        1rem;      /* 16px */
	--gscc-space-5:        1.5rem;    /* 24px */
	--gscc-space-6:        2rem;      /* 32px */
	--gscc-space-7:        3rem;      /* 48px */
	--gscc-space-8:        4rem;      /* 64px */
	--gscc-space-9:        6rem;      /* 96px */
	--gscc-space-10:       8rem;      /* 128px */

	/* ─────────────────────────────────────────────────────────────
	   LAYOUT
	   ───────────────────────────────────────────────────────────── */

	--gscc-max-width:      1240px;
	--gscc-max-width-prose: 68ch;     /* For readable body copy */
	--gscc-gutter:         1.5rem;    /* 24px edge gutter */
	--gscc-gutter-lg:      3rem;      /* 48px on wide screens */

	/* ─────────────────────────────────────────────────────────────
	   ELEVATION & BORDERS
	   ───────────────────────────────────────────────────────────── */

	--gscc-radius-sm:      2px;
	--gscc-radius-md:      6px;
	--gscc-radius-lg:      12px;
	--gscc-radius-full:    9999px;

	--gscc-border:         1px solid var(--gscc-grey-light);
	--gscc-border-strong:  2px solid var(--gscc-navy);
	--gscc-border-gold:    2px solid var(--gscc-gold);

	--gscc-shadow-sm:      0 1px 2px rgba(11, 29, 58, 0.05);
	--gscc-shadow-md:      0 4px 12px rgba(11, 29, 58, 0.08);
	--gscc-shadow-lg:      0 12px 32px rgba(11, 29, 58, 0.12);
	--gscc-shadow-inset:   inset 0 0 0 1px rgba(11, 29, 58, 0.08);

	/* ─────────────────────────────────────────────────────────────
	   MOTION
	   ───────────────────────────────────────────────────────────── */

	--gscc-ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
	--gscc-ease-out:       cubic-bezier(0, 0, 0.2, 1);
	--gscc-ease-in:        cubic-bezier(0.4, 0, 1, 1);
	--gscc-duration-fast:  150ms;
	--gscc-duration-base:  250ms;
	--gscc-duration-slow:  400ms;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
	:root {
		--gscc-duration-fast:  0ms;
		--gscc-duration-base:  0ms;
		--gscc-duration-slow:  0ms;
	}
}

/* ─────────────────────────────────────────────────────────────
   ASTRA PARENT TOKEN OVERRIDES
   Astra's customizer ships with a default green starter palette
   (teal buttons, mint page bg). We remap its global color tokens
   to our GSCC brand so Astra-rendered chrome (header button, page
   bg, links in admin-ish areas) picks up navy/gold/cream.
   These are Astra's conventional slots (0–8) — see Astra docs for
   which part of the UI uses which.
   ───────────────────────────────────────────────────────────── */
:root {
	--ast-global-color-0: #C9A227;   /* primary accent — buttons, CTAs (gold) */
	--ast-global-color-1: #8F7318;   /* accent hover (gold-dark) */
	--ast-global-color-2: #0B1D3A;   /* heading color (navy) */
	--ast-global-color-3: #1E1E1E;   /* body text (ink) */
	--ast-global-color-4: #F7F3EC;   /* page / section bg (cream) */
	--ast-global-color-5: #FFFFFF;   /* content bg / cards */
	--ast-global-color-6: #D8D4CA;   /* subtle borders (grey-light) */
	--ast-global-color-7: #0B1D3A;   /* dark accent (navy) */
	--ast-global-color-8: #060F1F;   /* darkest bg (navy-dark) */
}