/*
 * Colorado Accident Help — design tokens
 *
 * One source of truth for colour, type, space, radius, elevation and motion.
 * The palette is drawn from the state the site is about: high-country sky and
 * spruce for the structure, red rock for the moments that ask someone to act,
 * aspen gold for small marks. Deliberately not the flag's blue-and-red, which
 * would collide with the Texas site in the same network.
 *
 * Verified contrast (WCAG 2.2), all against white unless noted:
 *   alpine-900 #0A2531   16.0:1  AAA body text
 *   rust-700   #B4401F    6.3:1  AA body text, and white on it 6.3:1
 *   rust-800   #93321A    8.3:1  AA for small text on tinted grounds
 *   gold-600   #E9A93D    1.9:1  NON-TEXT ONLY — rules, marks, icon fills
 *   neutral-600 #4C6270    7.5:1  AAA for secondary text
 */

:root {
	/* ---------- Alpine: the structural colour ---------- */
	--co-alpine-950: #04141C;
	--co-alpine-900: #0A2531;
	--co-alpine-800: #0F3646;
	--co-alpine-700: #154A5F;
	--co-alpine-600: #1C6180;
	--co-alpine-500: #2C7FA3;
	--co-alpine-400: #5BA6C4;
	--co-alpine-100: #DCEAF0;
	--co-alpine-50:  #F0F6F9;

	/* ---------- Red rock: reserved for conversion ---------- */
	--co-rust-900: #6E2413;
	--co-rust-800: #93321A;
	--co-rust-700: #B4401F;
	--co-rust-600: #CE5127;
	--co-rust-500: #E2703F;
	--co-rust-100: #FADFD4;
	--co-rust-50:  #FDF2EC;

	/* ---------- Aspen gold: small marks, never text ---------- */
	--co-gold-800: #8A5E10;
	--co-gold-700: #B87F18;
	--co-gold-600: #E9A93D;
	--co-gold-500: #F2C069;
	--co-gold-100: #FBEBCE;
	--co-gold-50:  #FDF7EC;

	/* ---------- Granite neutrals, cooled toward alpine ---------- */
	--co-neutral-0:   #FFFFFF;
	--co-neutral-25:  #FBFCFD;
	--co-neutral-50:  #F5F8FA;
	--co-neutral-100: #ECF1F4;
	--co-neutral-200: #DFE7EB;
	--co-neutral-300: #C8D5DC;
	--co-neutral-400: #9DB0BA;
	--co-neutral-500: #6F8593;
	--co-neutral-600: #4C6270;
	--co-neutral-700: #334654;
	--co-neutral-800: #1C2C38;
	--co-neutral-900: #0E1C26;

	/* ---------- Semantic ---------- */
	--co-primary:        var(--co-alpine-900);
	--co-primary-strong: var(--co-alpine-950);
	--co-primary-soft:   var(--co-alpine-800);
	--co-primary-tint:   var(--co-alpine-50);
	--co-on-primary:     #FFFFFF;

	--co-secondary:        var(--co-alpine-700);
	--co-secondary-strong: var(--co-alpine-800);
	--co-secondary-soft:   var(--co-alpine-600);
	--co-secondary-tint:   var(--co-alpine-50);
	--co-on-secondary:     #FFFFFF;

	--co-accent:        var(--co-rust-700);
	--co-accent-strong: var(--co-rust-800);
	--co-accent-soft:   var(--co-rust-600);
	--co-accent-tint:   var(--co-rust-50);
	--co-on-accent:     #FFFFFF;

	--co-mark:      var(--co-gold-600);
	--co-mark-tint: var(--co-gold-50);

	--co-bg:            var(--co-neutral-50);
	--co-bg-alt:        var(--co-neutral-100);
	--co-surface:       var(--co-neutral-0);
	--co-surface-alt:   var(--co-neutral-25);
	--co-surface-sunk:  var(--co-neutral-100);
	--co-surface-invert: var(--co-alpine-900);

	--co-text:              var(--co-neutral-900);
	--co-text-soft:         var(--co-neutral-700);
	--co-text-muted:        var(--co-neutral-600);
	--co-text-invert:       #FFFFFF;
	--co-text-invert-muted: #A8C2CF;

	--co-border:        var(--co-neutral-300);
	--co-border-soft:   var(--co-neutral-200);
	--co-border-strong: var(--co-neutral-400);
	--co-border-invert: rgba(255,255,255,.15);

	/* Links take alpine, not rust: rust in running text reads as an error. */
	--co-link:       var(--co-alpine-700);
	--co-link-hover: var(--co-rust-800);

	--co-focus-ring: var(--co-alpine-500);

	/* ---------- Status, kept clear of the brand colours ---------- */
	--co-success:      #10714C;
	--co-success-tint: #E4F3ED;
	--co-warning:      var(--co-gold-800);
	--co-warning-tint: var(--co-gold-50);
	--co-error:        #B02418;
	--co-error-tint:   #FBEAE8;
	--co-info:         var(--co-alpine-600);
	--co-info-tint:    var(--co-alpine-50);

	/* ---------- Typography ---------- */
	--co-font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--co-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--co-font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--co-fs-display: clamp(2.5rem, 1.5rem + 4.1vw, 4rem);
	--co-fs-h1:      clamp(2.0625rem, 1.42rem + 2.6vw, 3.125rem);
	--co-fs-h2:      clamp(1.6875rem, 1.3rem + 1.6vw, 2.25rem);
	--co-fs-h3:      clamp(1.3125rem, 1.13rem + 0.8vw, 1.6875rem);
	--co-fs-h4:      clamp(1.125rem, 1.05rem + 0.32vw, 1.28rem);
	--co-fs-body-lg: clamp(1.0625rem, 1.01rem + 0.26vw, 1.1875rem);
	--co-fs-body:    1.0625rem;
	--co-fs-small:   0.9375rem;
	--co-fs-caption: 0.8125rem;
	--co-fs-button:  1rem;
	--co-fs-nav:     0.9688rem;
	--co-fs-eyebrow: 0.8125rem;

	--co-lh-tight:   1.06;
	--co-lh-snug:    1.18;
	--co-lh-heading: 1.22;
	--co-lh-normal:  1.55;
	--co-lh-relaxed: 1.7;

	--co-ls-display: -0.021em;
	--co-ls-heading: -0.013em;
	--co-ls-body:    -0.002em;
	--co-ls-eyebrow:  0.095em;

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

	/* ---------- Layout ---------- */
	--co-container-max:    1200px;
	--co-container-wide:   1360px;
	--co-container-narrow:  960px;
	--co-reading-max:       720px;

	--co-gutter:         32px;
	--co-gutter-tablet:  24px;
	--co-gutter-mobile:  20px;
	--co-gutter-current: var(--co-gutter);

	--co-header-h:        76px;
	--co-header-h-mobile: 62px;

	/* ---------- Spacing, 4px base ---------- */
	--co-space-1: 4px;
	--co-space-2: 8px;
	--co-space-3: 12px;
	--co-space-4: 16px;
	--co-space-5: 20px;
	--co-space-6: 24px;
	--co-space-8: 32px;
	--co-space-10: 40px;
	--co-space-12: 48px;
	--co-space-16: 64px;
	--co-space-20: 80px;
	--co-space-24: 96px;

	--co-section-y:    clamp(56px, 6.5vw, 104px);
	--co-section-y-lg: clamp(72px, 8vw, 136px);
	--co-stack:        clamp(20px, 2.2vw, 28px);
	--co-gap:          clamp(16px, 1.8vw, 24px);
	--co-gap-lg:       clamp(24px, 2.6vw, 40px);

	/* ---------- Radius ---------- */
	--co-radius-xs:   6px;
	--co-radius-sm:   8px;
	--co-radius-md:  12px;
	--co-radius-lg:  16px;
	--co-radius-xl:  24px;
	--co-radius-2xl: 32px;
	--co-radius-pill: 999px;

	/* ---------- Elevation, tuned to the alpine neutrals ---------- */
	--co-shadow-xs: 0 1px 2px rgba(10,37,49,.06);
	--co-shadow-sm: 0 1px 3px rgba(10,37,49,.08), 0 1px 2px rgba(10,37,49,.05);
	--co-shadow-md: 0 6px 16px -4px rgba(10,37,49,.11), 0 2px 6px -2px rgba(10,37,49,.06);
	--co-shadow-lg: 0 16px 36px -10px rgba(10,37,49,.17), 0 6px 14px -6px rgba(10,37,49,.08);
	--co-shadow-xl: 0 30px 64px -16px rgba(10,37,49,.23), 0 10px 24px -10px rgba(10,37,49,.10);
	--co-shadow-ring: 0 0 0 1px var(--co-border-soft);

	/* ---------- Surface effects ---------- */
	--co-grad-hero:
		radial-gradient(120% 90% at 10% 0%, rgba(44,127,163,.34) 0%, transparent 58%),
		radial-gradient(85% 70% at 100% 4%, rgba(180,64,31,.22) 0%, transparent 55%),
		linear-gradient(168deg, #12415A 0%, #0A2531 46%, #04141C 100%);
	--co-grad-alpine: linear-gradient(160deg, #0F3646 0%, #0A2531 100%);
	--co-grad-rust:   linear-gradient(135deg, #CE5127 0%, #B4401F 56%, #93321A 100%);
	--co-grad-sheen:  linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
	--co-grad-rule:   linear-gradient(90deg, var(--co-rust-700), var(--co-gold-600) 60%, var(--co-alpine-600));

	--co-glow-rust:   0 10px 30px -8px rgba(180,64,31,.42);
	--co-glow-alpine: 0 10px 34px -10px rgba(10,37,49,.45);

	--co-glass:        rgba(255,255,255,.74);
	--co-glass-dark:   rgba(255,255,255,.06);
	--co-glass-border: rgba(255,255,255,.15);

	/* A ridge line used as a section divider, drawn not illustrated. */
	--co-ridge: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.06) 6px 7px);

	/* ---------- Controls ---------- */
	--co-control-h:    48px;
	--co-control-h-sm: 40px;
	--co-control-h-lg: 56px;
	--co-control-radius: var(--co-radius-md);
	--co-tap-min: 44px;

	/* ---------- Motion ---------- */
	--co-ease-out:    cubic-bezier(.22,.61,.36,1);
	--co-ease-in-out: cubic-bezier(.65,.05,.36,1);
	--co-ease-spring: cubic-bezier(.34,1.32,.64,1);
	--co-dur-fast:  140ms;
	--co-dur:       240ms;
	--co-dur-slow:  420ms;
	--co-dur-xslow: 780ms;
	--co-stagger:    70ms;

	/* ---------- Z-index ---------- */
	--co-z-base:      1;
	--co-z-sticky:  100;
	--co-z-header:  200;
	--co-z-dropdown:300;
	--co-z-overlay: 400;
	--co-z-modal:   500;
	--co-z-toast:   600;
	--co-z-skip:    700;
}

@media (max-width: 1024px) { :root { --co-gutter-current: var(--co-gutter-tablet); } }
@media (max-width: 767px)  { :root { --co-gutter-current: var(--co-gutter-mobile); } }