/* Carson Daly Racing - design tokens.
 *
 * One place for every colour, weight and measure the site uses. Change a value
 * here and it changes everywhere: the countdown bar, the schedule, the buttons,
 * the components inside Elementor sections.
 *
 * Taken from the approved homepage mockup.
 */

:root {
	/* Ground and surfaces -------------------------------------------- */
	--cdr-black:        #0A0A0B;   /* page ground */
	--cdr-panel:        #141416;   /* cards, schedule rows, the countdown bar */
	--cdr-panel-raised: #1C1C1F;   /* a panel sitting on a panel */
	--cdr-concrete:     #E8E7E3;   /* the light sponsor strip */
	--cdr-concrete-2:   #D6D5D0;

	/* Type ----------------------------------------------------------- */
	--cdr-white:        #FFFFFF;
	--cdr-off-white:    #F2F2EF;
	--cdr-grey:         #9A9A94;   /* secondary text on dark */
	--cdr-grey-dim:     #6E6E68;   /* meta, captions */
	--cdr-ink:          #0A0A0B;   /* text on light and on yellow */

	/* Brand ---------------------------------------------------------- */
	--cdr-yellow:       #FFD200;   /* the brand accent: CTAs, Endurance, focus */
	--cdr-yellow-deep:  #E5BD00;   /* hover and pressed */
	--cdr-sprint:       #2E7FE8;   /* Sprint Series identification only */

	/* Lines ---------------------------------------------------------- */
	--cdr-rule:         #2A2A2D;
	--cdr-rule-strong:  #3C3C41;
	--cdr-rule-light:   #C8C7C2;

	/* Type scale ----------------------------------------------------- */
	--cdr-font-display: "Archivo", "Arial Narrow", Impact, sans-serif;
	--cdr-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--cdr-font-data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--cdr-display-tracking: -0.02em;
	--cdr-label-tracking:    0.16em;

	/* Measures ------------------------------------------------------- */
	--cdr-radius:       2px;       /* the mockup is square-edged; keep it near zero */
	--cdr-gap:          20px;
	--cdr-section-y:    clamp(48px, 7vw, 96px);
	--cdr-container:    1240px;

	/* Motion --------------------------------------------------------- */
	--cdr-ease:         cubic-bezier(.2, .7, .3, 1);
	--cdr-speed:        .18s;
}

/* Every series colour is set per term in the admin; these are the fallbacks
   used before a colour has been chosen. */
:root {
	--cdr-series-sprint:    var(--cdr-sprint);
	--cdr-series-endurance: var(--cdr-yellow);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--cdr-speed: 0s;
	}
}