/* HUDSY color tokens — exact values from the Figma file */
:root {
  /* Base */
  --hudsy-black: rgb(0, 0, 0);
  --hudsy-white: rgb(255, 255, 255);

  /* Brand accents */
  --hudsy-blue: rgb(36, 186, 226);      /* HUDSY blue — links, address text, gradient washes, supporters band */
  --hudsy-blue-alt: rgb(38, 187, 227);  /* near-duplicate blue used on some fills */
  --hudsy-yellow: rgb(238, 255, 0);     /* electric yellow — hover states, ticker band, alt logo */
  --hudsy-pink: rgb(245, 53, 170);      /* rare accent (production lighting imagery) */

  /* Grays (as used, not a generated ramp) */
  --hudsy-gray-925: rgb(26, 26, 26);
  --hudsy-gray-900: rgb(28, 28, 28);
  --hudsy-gray-850: rgb(40, 40, 40);
  --hudsy-gray-800: rgb(50, 50, 50);
  --hudsy-gray-750: rgb(63, 63, 63);
  --hudsy-gray-700: rgb(77, 77, 77);
  --hudsy-gray-500: rgb(112, 112, 112);
  --hudsy-gray-450: rgb(139, 139, 139); /* inactive button stroke/text */
  --hudsy-gray-400: rgb(157, 157, 157);
  --hudsy-gray-300: rgb(204, 204, 204);
  --hudsy-gray-200: rgb(217, 217, 217);
  --hudsy-gray-100: rgb(232, 232, 232);

  /* Semantic aliases */
  --surface-page: var(--hudsy-black);
  --surface-inverse: var(--hudsy-white);
  --surface-band-blue: var(--hudsy-blue);
  --surface-band-yellow: var(--hudsy-yellow);
  --text-primary: var(--hudsy-white);
  --text-inverse: var(--hudsy-black);
  --text-muted: var(--hudsy-gray-500);
  --text-inactive: var(--hudsy-gray-450);
  --text-accent: var(--hudsy-blue);
  --text-hover: var(--hudsy-yellow);
  --border-primary: var(--hudsy-white);
  --border-inverse: var(--hudsy-black);
  --border-inactive: var(--hudsy-gray-450);

  /* Protection gradients (hero / image washes, from Figma) */
  --wash-bottom-black: linear-gradient(193.104deg, rgba(0, 0, 0, 0) 59.66%, rgb(0, 0, 0) 85.1%); /* @kind color */
  --wash-left-black: linear-gradient(-66.604deg, rgba(0, 0, 0, 0) 5.53%, rgb(0, 0, 0) 53.06%); /* @kind color */
  --wash-blue-corner: linear-gradient(133.421deg, rgba(0, 0, 0, 0) 65.18%, rgb(36, 186, 226) 125.55%);
}

/* HUDSY typography tokens — exact values from the Figma file */
:root {
  /* Families */
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Panton Caps", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Display / hero — DM Mono Medium, uppercase */
  --type-hero-size: 80px;          /* line-height 1.17, tracking -0.02em */
  --type-hero-line: 1.17;
  --type-hero-tracking: -0.02em;

  /* Section headers — Panton Black Caps */
  --type-section-size: 32px;       /* also 36px on section pages; 72px for big statements */
  --type-section-size-lg: 36px;
  --type-section-size-xl: 72px;
  --type-section-line: 1.1;
  --type-section-tracking: 0.04em;

  /* Mono labels & marquee — DM Mono Medium */
  --type-marquee-size: 22px;       /* line-height 0.98, tracking 0.03em */
  --type-mono-lg-size: 24px;       /* JOIN OUR NETWORK */
  --type-mono-size: 16px;          /* nav tabs, buttons, form labels; tracking -0.02em */
  --type-mono-sm-size: 12px;       /* footer meta, event date/time */

  /* Body — DM Sans */
  --type-body-size: 16px;          /* regular 400, line-height 1.342 */
  --type-body-line: 1.342;
  --type-lede-size: 18px;          /* medium 500, line-height 1, tracking 0.03em */
  --type-caption-size: 14px;       /* regular 400, line-height 1.03 */

  /* Buttons */
  --type-button-size: 14px;        /* DM Mono 500, tracking -0.02em (16px on reg pills, 12px on small) */
  --type-button-sm-size: 12px;
}

/* HUDSY spacing / layout / radius tokens — exact values from the Figma file */
:root {
  /* Page grid */
  --page-width: 1440px;
  --page-margin: 120px;            /* left/right page padding */
  --content-width: 1200px;

  /* Section rhythm */
  --space-section: 120px;
  --space-block: 60px;
  --space-group: 32px;
  --space-item: 24px;
  --space-tight: 12px;
  --space-micro: 10px;

  /* Component paddings */
  --pad-nav: 24px 120px;           /* nav bar, 85px tall */
  --pad-pill-reg: 8px 32px;        /* regular pill button, 37px tall */
  --pad-pill-sm: 6px 24px;         /* small pill button, 28px tall */
  --pad-tab: 8px 16px;             /* nav tab */
  --pad-accordion: 32px;
  --pad-card-media: 64px;

  /* Radii — pills only; everything else is square-cornered */
  --radius-pill: 39px;
  --radius-pill-sm: 57px;
  --radius-none: 0px;

  /* Borders */
  --stroke-pill: 1.5px;            /* pill button stroke (inset) */
  --stroke-hairline: 1px;
  --stroke-underline: 1.5px;       /* underline-button bottom rule */
}

/* HUDSY base element styles */
a {
  color: var(--hudsy-white, rgb(255, 255, 255));
  text-decoration: none;
}
a:hover {
  color: var(--hudsy-yellow, rgb(238, 255, 0));
}

/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --schemes-on-surface: rgb(29,27,32); /* @kind color */
  --schemes-primary: rgb(103,80,164); /* @kind color */
}

:root[data-theme="light"], .light {
  --schemes-on-surface: rgb(0,0,0); /* @kind color */
  --schemes-on-surface: rgb(29,27,32); /* @kind color */
  --schemes-primary: rgb(39,23,78); /* @kind color */
  --schemes-primary: rgb(73,57,113); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --schemes-on-surface: rgb(230,224,233); /* @kind color */
  --schemes-on-surface: rgb(255,249,255); /* @kind color */
  --schemes-on-surface: rgb(255,255,255); /* @kind color */
  --schemes-primary: rgb(208,188,255); /* @kind color */
  --schemes-primary: rgb(211,193,255); /* @kind color */
  --schemes-primary: rgb(255,249,255); /* @kind color */
}

:root[data-mode="monochrome-lt"] {
  --schemes-on-surface: rgb(27,27,27); /* @kind color */
  --schemes-primary: rgb(0,0,0); /* @kind color */
}

:root[data-mode="monochrome-dt"] {
  --schemes-on-surface: rgb(226,226,226); /* @kind color */
  --schemes-primary: rgb(255,255,255); /* @kind color */
}

:root[data-mode="pink-lt"] {
  --schemes-on-surface: rgb(33,25,28); /* @kind color */
  --schemes-primary: rgb(138,75,104); /* @kind color */
}

:root[data-mode="pink-dt"] {
  --schemes-on-surface: rgb(238,223,227); /* @kind color */
  --schemes-primary: rgb(254,176,209); /* @kind color */
}

:root[data-mode="rose-lt"] {
  --schemes-on-surface: rgb(34,25,26); /* @kind color */
  --schemes-primary: rgb(143,74,86); /* @kind color */
}

:root[data-mode="rose-dt"] {
  --schemes-on-surface: rgb(240,222,223); /* @kind color */
  --schemes-primary: rgb(255,178,189); /* @kind color */
}

:root[data-mode="red-lt"] {
  --schemes-on-surface: rgb(35,25,24); /* @kind color */
  --schemes-primary: rgb(145,75,67); /* @kind color */
}

:root[data-mode="red-dt"] {
  --schemes-on-surface: rgb(241,222,220); /* @kind color */
  --schemes-primary: rgb(255,167,155); /* @kind color */
}

:root[data-mode="orange-lt"] {
  --schemes-on-surface: rgb(34,26,21); /* @kind color */
  --schemes-primary: rgb(141,79,40); /* @kind color */
}

:root[data-mode="orange-dt"] {
  --schemes-on-surface: rgb(240,223,215); /* @kind color */
  --schemes-primary: rgb(255,182,140); /* @kind color */
}

:root[data-mode="yellow-lt"] {
  --schemes-on-surface: rgb(31,27,19); /* @kind color */
  --schemes-primary: rgb(121,90,12); /* @kind color */
}

:root[data-mode="yellow-dt"] {
  --schemes-on-surface: rgb(235,225,212); /* @kind color */
  --schemes-primary: rgb(233,193,108); /* @kind color */
}

:root[data-mode="chartreuse-lt"] {
  --schemes-on-surface: rgb(27,28,20); /* @kind color */
  --schemes-primary: rgb(92,100,30); /* @kind color */
}

:root[data-mode="chartreuse-dt"] {
  --schemes-on-surface: rgb(229,227,214); /* @kind color */
  --schemes-primary: rgb(195,205,124); /* @kind color */
}

:root[data-mode="green-lt"] {
  --schemes-on-surface: rgb(24,29,24); /* @kind color */
  --schemes-primary: rgb(55,106,62); /* @kind color */
}

:root[data-mode="green-dt"] {
  --schemes-on-surface: rgb(224,228,219); /* @kind color */
  --schemes-primary: rgb(156,212,159); /* @kind color */
}

:root[data-mode="teal-lt"] {
  --schemes-on-surface: rgb(23,29,27); /* @kind color */
  --schemes-primary: rgb(0,107,96); /* @kind color */
}

:root[data-mode="teal-dt"] {
  --schemes-on-surface: rgb(221,228,225); /* @kind color */
  --schemes-primary: rgb(130,213,199); /* @kind color */
}

:root[data-mode="cyan-lt"] {
  --schemes-on-surface: rgb(23,28,30); /* @kind color */
  --schemes-primary: rgb(1,104,125); /* @kind color */
}

:root[data-mode="cyan-dt"] {
  --schemes-on-surface: rgb(222,227,230); /* @kind color */
  --schemes-primary: rgb(134,209,234); /* @kind color */
}

:root[data-mode="blue-lt"] {
  --schemes-on-surface: rgb(26,27,33); /* @kind color */
  --schemes-primary: rgb(72,94,146); /* @kind color */
}

:root[data-mode="blue-dt"] {
  --schemes-on-surface: rgb(226,226,233); /* @kind color */
  --schemes-primary: rgb(176,198,255); /* @kind color */
}

:root[data-mode="indigo-lt"] {
  --schemes-on-surface: rgb(28,27,33); /* @kind color */
  --schemes-primary: rgb(91,89,146); /* @kind color */
}

:root[data-mode="indigo-dt"] {
  --schemes-on-surface: rgb(229,225,233); /* @kind color */
  --schemes-primary: rgb(197,192,255); /* @kind color */
}

:root[data-mode="purple-lt"] {
  --schemes-on-surface: rgb(29,26,32); /* @kind color */
  --schemes-primary: rgb(107,84,141); /* @kind color */
}

:root[data-mode="purple-dt"] {
  --schemes-on-surface: rgb(231,224,232); /* @kind color */
  --schemes-primary: rgb(214,187,251); /* @kind color */
}

html, body { height: 100%; }
    body { margin: 0; background: #000; overflow: hidden; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
    a { color: rgb(36,186,226); text-decoration: none; }
    a:hover { color: rgb(238,255,0); }
    [data-hide-scroll]::-webkit-scrollbar { display: none; }
    @keyframes hudsyTipIn { from { opacity: 0; margin-top: 4px; } to { opacity: 1; margin-top: 0; } }
    @keyframes hudsyPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }