/* ======================================================================
   Hack Club design tokens — vendored from the official design system
   Source: https://design.hackclub.com/tokens/ (retrieved 2026-10-18)
   Values match the :root block served in the design system's own CSS.

   Self-hosted on purpose: keeps our strict CSP (default-src 'self'),
   works offline, and removes any runtime dependency on a CDN.
   The documented unpkg URLs (@hackclub/theme@2) were not yet published
   at time of vendoring; when they are, this file can be regenerated
   from @hackclub/tokens.
   ====================================================================== */

:root {
  /* Brand palette */
  --hc-red: #ec3750;
  --hc-orange: #ff8c37;
  --hc-yellow: #f1c40f;
  --hc-green: #33d6a6;
  --hc-cyan: #5bc0de;
  --hc-blue: #338eda;
  --hc-purple: #a633d6;
  --hc-gray: #8492a6;

  /* Neutrals & accessible reds (red is only 4.0:1 on white — red-text/red-dark for text) */
  --hc-ink: #17171d;
  --hc-ink2: #2e1719;
  --hc-paper: #ffffff;
  --hc-cream: #fff6eb;
  --hc-black: #000000;
  --hc-red-dark: #be1e3a;
  --hc-red-light: #ff5c72;

  /* Typography */
  --hc-font-sans: "Phantom Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hc-font-display: Zarathustra, "Iowan Old Style", Georgia, serif;
  --hc-font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --hc-weight-thin: 100;
  --hc-weight-light: 300;
  --hc-weight-book: 350;
  --hc-weight-regular: 400;
  --hc-weight-medium: 500;
  --hc-weight-semibold: 600;
  --hc-weight-bold: 700;
  --hc-text-xs: 0.8rem;
  --hc-text-sm: 1rem;
  --hc-text-md: 1.125rem;
  --hc-text-body: 1.25rem;
  --hc-text-lg: 1.5rem;
  --hc-text-xl: 2rem;
  --hc-text-heading: 2.5rem;
  --hc-text-title: clamp(2.2rem, 4vw, 3.4rem);
  --hc-text-display: clamp(3.25rem, 12vw, 5.625rem);
  --hc-leading-display: 0.92;
  --hc-leading-heading: 1;
  --hc-leading-snug: 1.2;
  --hc-leading-normal: 1.5;
  --hc-leading-prose: 1.7;
  --hc-tracking-display: -0.02em;
  --hc-tracking-normal: 0;
  --hc-tracking-kicker: 0.26em;

  /* Spacing (4px multiples) */
  --hc-space-0: 0;
  --hc-space-1: 4px;
  --hc-space-2: 8px;
  --hc-space-3: 12px;
  --hc-space-4: 16px;
  --hc-space-5: 20px;
  --hc-space-6: 24px;
  --hc-space-8: 32px;
  --hc-space-10: 40px;
  --hc-space-12: 48px;
  --hc-space-16: 64px;
  --hc-space-20: 80px;
  --hc-space-32: 128px;

  /* Radii */
  --hc-radius-sm: 6px;
  --hc-radius-md: 8px;
  --hc-radius-photo: 10px;
  --hc-radius-lg: 12px;
  --hc-radius-card: 16px;
  --hc-radius-xl: 24px;
  --hc-radius-2xl: 28px;
  --hc-radius-pill: 9999px;

  /* Shadows */
  --hc-shadow-card: 0 2px 16px #0000001a;
  --hc-shadow-raised: 0 20px 50px #5b341214;
  --hc-shadow-photo: 0 4px 20px #0000002e;
  --hc-shadow-pill: 0 10px 28px #17171d14;
  --hc-shadow-glow: 0 5px 16px #ec375066;
  --hc-shadow-offset: 2px 2px 0 #000;
  --hc-shadow-sticker: 0 2px 4px #0000001f;
  --hc-shadow-sticker-hover: 0 8px 16px #00000047;
  --hc-shadow-focus: 0 0 0 3px #ec375040;

  /* Gradients */
  --hc-gradient-brand: linear-gradient(90deg, #ec3750 0%, #ff8c37 100%);
  --hc-gradient-brand-deep: linear-gradient(90deg, #b3203d 0%, #d96b1d 100%);
  --hc-gradient-rainbow: repeating-linear-gradient(105deg, #ec3750 0%, #ff8c37 16%, #f1c40f 32%, #33d6a6 48%, #338eda 64%, #a633d6 80%, #ec3750 100%);
  --hc-gradient-ink: linear-gradient(135deg, #17171d 0%, #2e1719 45%, #ec3750 100%);
  --hc-gradient-red-wash: linear-gradient(180deg, #ec37500a 60%, #ec375066 100%);

  /* Motion */
  --hc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hc-ease-playful: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --hc-ease-standard: ease;
  --hc-duration-fast: 0.15s;
  --hc-duration-base: 0.2s;
  --hc-duration-medium: 0.3s;
  --hc-duration-slow: 0.4s;

  /* Layout */
  --hc-max-width: 1200px;
  --hc-prose-width: 800px;
  --hc-nav-height: 80px;
  --hc-gutter: clamp(16px, 6vw, 80px);
  --hc-section-y: clamp(80px, 12vw, 160px);

  /* Semantic tokens — DARK is RouteHack's default scheme.
     [data-theme="light"] below carries the official light scheme. */
  --hc-background: #17171d;
  --hc-foreground: #fff6eb;
  --hc-surface: #1f1f27;
  --hc-surface-hover: #2a2a33;
  --hc-border: #ffffff14;
  --hc-muted: #fff6ebb3;
  --hc-nav-bg: #17171dd1;
  --hc-red-text: #ff5c72;
  --hc-shadow-popover: 0 8px 32px #0009;
  color-scheme: dark;

  /* RGB channels for Tailwind (rgb(var(--c-*) / <alpha-value>)) */
  --c-ink: 255 246 235;        /* foreground */
  --c-base: 23 23 29;          /* page background */
  --c-paper: 31 31 39;         /* surface */
  --c-red-text: 255 92 114;    /* --hc-red-text */
  --c-green-deep: 51 214 166;  /* AA-safe green text, dark scheme */
  --c-blue-text: 111 179 232;  /* AA-safe blue text, dark scheme */
  --c-yellow-text: 241 196 15; /* AA-safe yellow text, dark scheme */
  --c-purple-text: 207 142 242;/* AA-safe purple text, dark scheme */
}

/* Official light scheme — applied when the visitor switches theme. */
[data-theme="light"] {
  --hc-background: #ffffff;
  --hc-foreground: #17171d;
  --hc-surface: #f9fafc;
  --hc-surface-hover: #f1f2f5;
  --hc-border: #00000014;
  --hc-muted: #17171db3;
  --hc-nav-bg: #ffffffd1;
  --hc-red-text: #be1e3a;
  --hc-shadow-popover: 0 8px 32px #00000021;
  color-scheme: light;

  --c-ink: 23 23 29;
  --c-base: 255 255 255;
  --c-paper: 249 250 252;
  --c-red-text: 190 30 58;
  --c-green-deep: 14 122 88;
  --c-blue-text: 31 108 184;
  --c-yellow-text: 138 109 0;
  --c-purple-text: 166 51 214;
}