globals.css

@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

/* ------------------------------------------------------------------ */
/* Boundless design system. Values are lifted directly from the Figma  */
/* "Boundless UX/UI Design" library (file Uj68VRMAVyrQApVlSsoLIE):      */
/* Colors 1158:16166, Typography 1158:16167, Buttons 1158:14186.       */
/* Scales run 50..900 (10 steps, no 75) and back the named utilities    */
/* (bg-primary-500, text-error-400, border-neutral-700, ...).          */
/* `static` keeps the whole foundation emitted (not tree-shaken) so the */
/* full palette and type scale resolve via var() and utilities even     */
/* before their first use in a component.                               */
/* ------------------------------------------------------------------ */
@theme static {
  /* The single page content width, shared by chrome and content so the nav,
     page body, and footer align on every screen. Gutters go on the outer
     element and the cap on an inner `mx-auto max-w-page`, so the gutter only
     bites below the cap and wide screens land on exactly this width. */
  --container-page: 1440px;

  --font-sans: var(--font-jakarta), ui-sans-serif, system-ui, sans-serif;
  /* Headings use TASA Orbiter (brand display font). The .woff2 files are not in
     the repo yet, so the stack falls back to Plus Jakarta Sans until they land
     via next/font/local. Swapping in the real face is then a one-line change. */
  --font-heading:
    'TASA Orbiter', var(--font-jakarta), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
  /* Bebas Neue condensed display face, used for partner wordmarks. */
  --font-display: var(--font-bebas), 'Bebas Neue', sans-serif;

  /* Neutral (cool charcoal) */
  --color-neutral-50: #f3f7f6;
  --color-neutral-100: #dde7e5;
  --color-neutral-200: #c2d0cd;
  --color-neutral-300: #9fb3af;
  --color-neutral-400: #7a8f8b;
  --color-neutral-500: #5c6f6b;
  --color-neutral-600: #42534f;
  --color-neutral-700: #2c3a37;
  --color-neutral-800: #1c2625;
  --color-neutral-900: #121a1a;

  /* Primary (brand teal) */
  --color-primary-50: #eafdf7;
  --color-primary-100: #bef9e5;
  --color-primary-200: #9ff7d8;
  --color-primary-300: #73f3c6;
  --color-primary-400: #58f1bb;
  --color-primary-500: #2eedaa;
  --color-primary-600: #2ad89b;
  --color-primary-700: #21a879;
  --color-primary-800: #19825e;
  --color-primary-900: #136447;

  /* Secondary (deep green-black surfaces) */
  --color-secondary-50: #e8e9e9;
  --color-secondary-100: #b8bbba;
  --color-secondary-200: #969a99;
  --color-secondary-300: #666c6b;
  --color-secondary-400: #484f4e;
  --color-secondary-500: #1a2322;
  --color-secondary-600: #18201f;
  --color-secondary-700: #121918;
  --color-secondary-800: #0e1313;
  --color-secondary-900: #0b0f0e;

  /* Success (green) */
  --color-success-50: #e9f9ef;
  --color-success-100: #baedcd;
  --color-success-200: #99e4b5;
  --color-success-300: #6bd893;
  --color-success-400: #4ed17e;
  --color-success-500: #22c55e;
  --color-success-600: #1fb356;
  --color-success-700: #188c43;
  --color-success-800: #136c34;
  --color-success-900: #0e5327;

  /* Warning (amber) */
  --color-warning-50: #fef7e6;
  --color-warning-100: #fce7b0;
  --color-warning-200: #fadc8a;
  --color-warning-300: #f8cc55;
  --color-warning-400: #f7c234;
  --color-warning-500: #f5b301;
  --color-warning-600: #dfa301;
  --color-warning-700: #ae7f01;
  --color-warning-800: #876201;
  --color-warning-900: #674b00;

  /* Error (red) */
  --color-error-50: #ffeded;
  --color-error-100: #ffc8c8;
  --color-error-200: #ffadad;
  --color-error-300: #ff8888;
  --color-error-400: #ff7171;
  --color-error-500: #ff4d4d;
  --color-error-600: #e84646;
  --color-error-700: #b53737;
  --color-error-800: #8c2a2a;
  --color-error-900: #6b2020;

  /* Info (blue) */
  --color-info-50: #ebf6ff;
  --color-info-100: #c2e4ff;
  --color-info-200: #a5d7ff;
  --color-info-300: #7cc4ff;
  --color-info-400: #62b9ff;
  --color-info-500: #3ba7ff;
  --color-info-600: #3698e8;
  --color-info-700: #2a77b5;
  --color-info-800: #205c8c;
  --color-info-900: #19466b;

  /* Brand aliases kept for marketing surfaces (bg-brand, text-brand). */
  --color-brand: #2eedaa;
  --color-brand-hover: #2ad89b;
  --color-brand-soft: #eafdf7;
  --color-lime: #a7f950; /* bright lime accent (glows, winner rings) */
  --color-border-subtle: #1f2a28; /* Border/Subtle: quieter than border */
  --color-ink: #0d1111;
  --color-ink-soft: #141c1c;
  --color-active-bg: rgba(46, 237, 170, 0.08);
  --color-active-bg2: rgba(46, 237, 170, 0.32);
  --color-hero-bg: #0d1111;
  --color-text-muted: #999da2;
  --color-text-muted-brand: #e8e9e7;
  --color-surface-subtle: rgba(250, 250, 250, 0.02);

  /* ---------------------------------------------------------------- */
  /* Type scale (Figma Typography 1158:16167).                        */
  /* Headings -> TASA Orbiter (apply `font-heading`). Body/captions -> */
  /* Plus Jakarta Sans (the default sans). Captions are uppercase.    */
  /* ---------------------------------------------------------------- */
  --text-display-lg: 3.5rem; /* 56px */
  --text-display-lg--line-height: 1;
  --text-display-lg--letter-spacing: -0.04em;
  --text-display-sm: 3rem; /* 48px */
  --text-display-sm--line-height: 1;
  --text-display-sm--letter-spacing: -0.04em;

  --text-h1: 2.5rem; /* 40px */
  --text-h1--line-height: 1;
  --text-h1--letter-spacing: -0.04em;
  --text-h2: 2rem; /* 32px */
  --text-h2--line-height: 1;
  --text-h2--letter-spacing: -0.04em;
  --text-h3: 1.75rem; /* 28px */
  --text-h3--line-height: 1.2;
  --text-h3--letter-spacing: -0.02em;
  --text-h4: 1.5rem; /* 24px */
  --text-h4--line-height: 1.2;
  --text-h4--letter-spacing: -0.02em;
  --text-h5: 1.25rem; /* 20px */
  --text-h5--line-height: 1.2;
  --text-h5--letter-spacing: -0.02em;
  --text-h6: 1.125rem; /* 18px */
  --text-h6--line-height: 1.2;
  --text-h6--letter-spacing: -0.02em;

  --text-body-lg: 1.125rem; /* 18px */
  --text-body-lg--line-height: 1.45;
  --text-body: 1rem; /* 16px */
  --text-body--line-height: 1.45;
  --text-body-sm: 0.875rem; /* 14px */
  --text-body-sm--line-height: 1.45;
  --text-body-xs: 0.75rem; /* 12px */
  --text-body-xs--line-height: 1.45;

  --text-caption-lg: 0.875rem; /* 14px */
  --text-caption-lg--line-height: 1.2;
  --text-caption-lg--letter-spacing: 0.12em;
  --text-caption-lg--font-weight: 600;
  --text-caption-sm: 0.75rem; /* 12px */
  --text-caption-sm--line-height: 1.2;
  --text-caption-sm--letter-spacing: 0.12em;
  --text-caption-sm--font-weight: 600;
  --text-caption-xs: 0.625rem; /* 10px */
  --text-caption-xs--line-height: 1.2;
  --text-caption-xs--letter-spacing: 0.16em;
  --text-caption-xs--font-weight: 600;

  /* Marketing: prize pool ticker. Translates the duplicated track up by one
     copy (-50%) for a seamless vertical loop. */
  --animate-prize-scroll: prize-scroll 18s linear infinite;
  /* Marketing: pillar card. Steps through four rows, holding on each, then
     loops via a duplicated first row. */
  --animate-card-rotate: card-rotate 10s ease-in-out infinite;
  /* Marketing: testimonials. Two duplicated rows slide horizontally in
     opposite directions for a seamless loop (-50% = one copy). */
  --animate-marquee-left: marquee-left 48s linear infinite;
  --animate-marquee-right: marquee-right 48s linear infinite;
  /* Credits hero glow entrance: fade + drift with the Figma smart-animate
     spring (slight overshoot, then settle). */
  --animate-glow-in: glow-in 0.255523s
    linear(
      0,
      0.0679,
      0.2195,
      0.3978,
      0.5686,
      0.7142,
      0.8283,
      0.9113,
      0.9671,
      1.0014,
      1.0198,
      1.0274,
      1.0281,
      1.025,
      1.0202,
      1.0152,
      1.0106,
      1.0068,
      1.0039,
      1.0018,
      1.0005,
      0.9997,
      0.9993,
      0.9992,
      0.9992,
      0.9993
    )
    both;
}

@keyframes glow-in {
  from {
    opacity: 0;
    translate: -8px 6px;
  }
  to {
    opacity: 0.6;
    translate: 0 0;
  }
}

@keyframes prize-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

@keyframes marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes card-rotate {
  0%,
  20% {
    transform: translateY(0);
  }
  25%,
  45% {
    transform: translateY(-20%);
  }
  50%,
  70% {
    transform: translateY(-40%);
  }
  75%,
  95% {
    transform: translateY(-60%);
  }
  100% {
    transform: translateY(-80%);
  }
}

/* ------------------------------------------------------------------ */
/* shadcn/ui semantic tokens. The dark theme is canonical (the app     */
/* defaults to `dark` in Providers) and maps 1:1 to the Figma          */
/* foundation surfaces; light is a derived, usable counterpart.        */
/* ------------------------------------------------------------------ */
:root {
  --radius: 0.5rem; /* Figma "Rounded" button radius = 8px */

  --background: #ffffff;
  --foreground: #121a1a;
  --card: #ffffff;
  --card-foreground: #121a1a;
  --popover: #ffffff;
  --popover-foreground: #121a1a;

  --primary: #2eedaa;
  --primary-foreground: #0d1111;

  --secondary: #f3f7f6;
  --secondary-foreground: #121a1a;
  --muted: #f3f7f6;
  --muted-foreground: #5c6f6b;
  --accent: #eafdf7;
  --accent-foreground: #136447;
  --destructive: #ff4d4d;
  --destructive-foreground: #0d1111;

  --border: #dde7e5;
  --input: #dde7e5;
  --ring: #2eedaa;

  --chart-1: #2eedaa;
  --chart-2: #3ba7ff;
  --chart-3: #f5b301;
  --chart-4: #ff4d4d;
  --chart-5: #22c55e;

  --sidebar: #f3f7f6;
  --sidebar-foreground: #121a1a;
  --sidebar-primary: #2eedaa;
  --sidebar-primary-foreground: #0d1111;
  --sidebar-accent: #eafdf7;
  --sidebar-accent-foreground: #136447;
  --sidebar-border: #dde7e5;
  --sidebar-ring: #2eedaa;
}

.dark {
  /* Foundation surfaces (Figma Colors 1158:16166) */
  --background: #0d1111; /* Background/Base */
  --foreground: #f1fff1; /* Text/Primary */
  --card: #141c1c; /* Surface/Base */
  --card-foreground: #f1fff1;
  --popover: #1a2322; /* Background/Raised */
  --popover-foreground: #f1fff1;

  --primary: #2eedaa; /* Primary 500 */
  --primary-foreground: #0d1111; /* Text/OnPrimaryButton */

  --secondary: #1a2322; /* Secondary 500 */
  --secondary-foreground: #f1fff1;
  --muted: #141c1c;
  --muted-foreground: #72736f; /* Text/Secondary */
  --accent: #182120; /* Surface/Hover */
  --accent-foreground: #f1fff1;
  --destructive: #ff4d4d; /* Error 500 */
  --destructive-foreground: #0d1111;

  --border: #2e3a38; /* Border/Default */
  --input: #2e3a38;
  --ring: #2eedaa;

  --chart-1: #2eedaa;
  --chart-2: #3ba7ff;
  --chart-3: #f5b301;
  --chart-4: #ff4d4d;
  --chart-5: #22c55e;

  --sidebar: #141c1c;
  --sidebar-foreground: #f1fff1;
  --sidebar-primary: #2eedaa;
  --sidebar-primary-foreground: #0d1111;
  --sidebar-accent: #182120;
  --sidebar-accent-foreground: #f1fff1;
  --sidebar-border: #2e3a38;
  --sidebar-ring: #2eedaa;
}

/* Map semantic tokens to Tailwind color utilities. */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-pill: 999px;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
  }

  button {
    cursor: pointer;
  }
}

/* Reusable scrollbar utilities. */
@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

@utility custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a transparent;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 3px;
  }
}