/*
 * GeekCade design tokens. The single source for colour, type, spacing and layout values.
 * Never hard-code these elsewhere: use var(--gc-*). Reference: docs/GEEK-2-design-system.md
 */
:root {
	/* ---- Colour -------------------------------------------------------------------------
	   Contrast is WCAG ratio on --gc-bg / --gc-panel (AA text = 4.5, AA large/UI = 3). */
	--gc-bg:      #070b13;   /* page background */
	--gc-panel:   #101a2b;   /* panels, inputs */
	--gc-line:    #30455e;   /* borders and dividers (decorative, 2.0:1) */
	--gc-line-strong: #48667b;   /* control borders that must be seen (3:1) */

	--gc-yellow:  #ffd365;   /* branding, titles, active state, first place       13.8 / 12.3 */
	--gc-cyan:    #68eaff;   /* information, links, names, focus ring              13.9 / 12.3 */
	--gc-pink:    #fa6196;   /* labels, competitive state, warnings, errors         6.8 /  6.0 */
	--gc-green:   #65f58a;   /* positive state, success                            14.0 / 12.4 */

	--gc-text:    #e8f3fb;   /* body text                                          17.5 / 15.5 */
	--gc-muted:   #a3b6c9;   /* secondary text                                      9.5 /  8.4 */

	/* Surfaces and effects used by components */
	--gc-header-bg:  #090f1b;                              /* header */
	--gc-footer-bg:  #080f19;                              /* footer */
	--gc-card-from:  #122337;  --gc-card-to: #0c1422;      /* tile / card gradient */
	--gc-card-line:  #344c63;                              /* card border */
	--gc-panel-deep: #0e1929;                              /* inset panels */
	--gc-cta-bg:     #0d2935;  --gc-cta-shadow: #164456;   /* pixel button */
	--gc-on-accent:  #07111c;                              /* text on yellow / cyan fills (13.4:1+) */

	/* Page-title bar: lighter than the header and a title colour that is not the yellow wordmark */
	--gc-title-bg:     var(--gc-panel);
	--gc-title-border: var(--gc-line);
	--gc-title-color:  var(--gc-text);

	--gc-hover:     var(--gc-yellow);        /* link / control hover */
	--gc-focus:     var(--gc-cyan);          /* 3px focus ring, always visible */
	--gc-hover-bg:  rgba(104, 234, 255, .12);
	--gc-glow-yellow: 0 0 18px rgba(255, 211, 101, .33);

	/* Retired names, kept so older pages keep working: red is now pink, black is the page background */
	--gc-red:   var(--gc-pink);
	--gc-black: var(--gc-bg);
	--gc-navy:  var(--gc-header-bg);

	/* ---- Typography ----------------------------------------------------------------------
	   Arcade (Press Start 2P): wordmark, page and section titles, labels, buttons. Never body text.
	   UI (Rajdhani): everything else, including scores. */
	--gc-font-arcade: 'Press Start 2P', 'Courier New', monospace;
	--gc-font-ui:     'Rajdhani', Arial, Helvetica, sans-serif;
	--gc-font-brand:  var(--gc-font-arcade);
	--gc-font-score:  var(--gc-font-ui);     /* weight 700, tabular figures */

	--gc-fw-body: 400;
	--gc-fw-strong: 600;
	--gc-fw-heading: 700;

	--gc-fs-xs: .875rem;       /* 14px captions, dates */
	--gc-fs-sm: 1rem;          /* 16px UI minimum */
	--gc-fs-body: 1.1875rem;   /* 19px body */
	--gc-fs-md: 1.25rem;       /* 20px prose, table data */
	--gc-fs-lg: 1.5rem;        /* 24px lead text */
	--gc-fs-xl: clamp(1.5rem, 1.2rem + 1.6vw, 2rem);      /* 24-32px UI large (legacy .flarge) */
	--gc-fs-label: 10px;       /* arcade-font labels and buttons */
	--gc-fs-title: clamp(13px, 1.5vw, 16px);              /* arcade-font page title, one size on every page */
	--gc-fs-heading: clamp(18px, 2.4vw, 28px);            /* arcade-font section heading */
	--gc-fs-hero: clamp(25px, 4vw, 55px);                 /* arcade-font hero */
	--gc-lh: 1.45;

	/* ---- Spacing (4px base) -------------------------------------------------------------- */
	--gc-sp-1: .25rem;  --gc-sp-2: .5rem;  --gc-sp-3: .75rem;  --gc-sp-4: 1rem;
	--gc-sp-5: 1.5rem;  --gc-sp-6: 2rem;   --gc-sp-7: 3rem;
	--gc-gutter: 24px;
	--gc-radius: 3px;
	--gc-grid-gap: 14px;

	/* ---- Layout -------------------------------------------------------------------------- */
	--gc-header-h: 68px;
	--gc-max-w: 1300px;
	--gc-tile-w: 250px;
	--gc-z-header: 100;
	--gc-z-overlay: 1000;
}

/* Breakpoints (CSS variables cannot be used in media queries; these literals are repeated):
     1150px  five tile columns -> four        |  1100px  header menu collapses to a toggle
      850px  four -> three                    |   760px  mobile type and spacing
      620px  three -> two                     |   380px  two -> one */
@media (max-width: 760px) { :root { --gc-gutter: 16px; } }