/* ==========================================================================
   Design tokens — copied exactly from EventCrate's real design system
   (extracted from the source design file). Don't rename these; the
   component classes in components.css all reference them by name.
   ========================================================================== */
:root{
/* --- Base: crate red (the logo + primary CTA colour) --- */
--ec-red-300:#F5A5A5;--ec-red-400:#EC6262;--ec-red-500:#EA4F4F;--ec-red-600:#E62A2A;--ec-red-700:#C11B1B;
/* --- Base: delegate blue (the secondary/outline colour) --- */
--ec-blue-200:#DCE8F8;--ec-blue-300:#9DBFED;--ec-blue-500:#649AE2;--ec-blue-700:#3F83DB;--ec-blue-800:#2C6BBE;
/* --- Base: neutrals --- */
--ec-white:#FFFFFF;--ec-grey-50:#F7F8FA;--ec-grey-100:#F0F2F5;--ec-grey-200:#E2E5EA;--ec-grey-400:#B4B4B4;
--ec-ink-500:#808080;--ec-ink-700:#5F5F5F;--ec-ink-900:#3A3A3A;
/* --- Semantic aliases (use these in components, not the raw colours above) --- */
--brand-primary:var(--ec-red-500);--brand-primary-hover:var(--ec-red-600);--brand-primary-press:var(--ec-red-700);
--brand-secondary:var(--ec-blue-500);--brand-secondary-hover:var(--ec-blue-700);--brand-secondary-press:var(--ec-blue-800);
--text-heading:var(--ec-ink-900);--text-body:var(--ec-ink-700);--text-muted:var(--ec-ink-500);
--text-invert:var(--ec-white);--text-accent:var(--ec-blue-500);--text-on-primary:var(--ec-white);
--surface-page:var(--ec-white);--surface-sunken:var(--ec-grey-50);--surface-card:var(--ec-white);
--surface-band:var(--ec-blue-500);--surface-tile:var(--ec-red-500);--surface-inverse:var(--ec-ink-900);
--border-hairline:var(--ec-grey-200);--border-strong:var(--ec-blue-500);--border-quiet:var(--ec-grey-400);
/* --- Logo facet colours (the crate + cube mark only — never use as UI fills) --- */
--logo-crate-top:#EC6262;--logo-crate-front:#EA4F4F;--logo-crate-side:#E62A2A;
--logo-cube-top:#9DBFED;--logo-cube-front:#649AE2;--logo-cube-side:#3F83DB;
}
:root{
--font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
--font-condensed:"Archivo Narrow","Archivo","Helvetica Neue",Arial,sans-serif;
--font-body:"Open Sans","Segoe UI",Arial,sans-serif;
--weight-regular:400;--weight-semibold:600;--weight-bold:700;--weight-black:900;
--text-wordmark:76px;--text-display-1:44px;--text-display-2:34px;
--text-hero:30px;--text-cta:27px;--text-band:21px;--text-card-title:20px;
--text-body-size:15px;--text-small:13px;--text-label:11px;
--leading-tight:1.1;--leading-snug:1.28;--leading-body:1.45;
--tracking-caps:0.02em;--tracking-label:0.18em;--tracking-tagline:0.28em;
}
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;
--gutter-page:80px;--band-height:66px;--row-gap:80px;--content-max:1120px;
}
:root{
--radius-sm:6px;--radius-md:14px;--radius-lg:20px;--radius-pill:999px;
--border-width:1px;--border-width-strong:4px;
--shadow-tile:0 1px 2px rgba(58,58,58,.12);
--shadow-card:0 2px 10px rgba(58,58,58,.10);
--shadow-raised:0 8px 24px rgba(58,58,58,.14);
--focus-ring:0 0 0 3px rgba(100,154,226,.45);
--motion-fast:120ms;--motion-base:180ms;--motion-slow:280ms;
--ease-standard:cubic-bezier(.2,0,.2,1);--press-scale:.985;
}