/* ============================================================
   Limitless — Semantic tokens
   Clean brand aliases layered on top of the raw Figma primitives
   (components/fig-tokens.css). Components should reference THESE,
   not the deep --tailwind-* / --primitive-* names.

   Defaults below = the product's DARK theme (Limitless ships dark).
   A .light scope is provided for light surfaces.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --brand-neon: rgb(195, 255, 0);     /* #C3FF00 — primary CTA / signature */
  --brand-neon-hover: rgb(176, 230, 0);
  --brand-neon-press: rgb(157, 204, 0);
  --brand-black: rgb(0, 0, 0);
  --brand-white: rgb(255, 255, 255);
  --hero-green: rgb(4, 47, 27);       /* #042F1B — hero banner field */
  --hero-green-2: rgb(7, 64, 37);

  /* ---- Fonts ---- */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;   /* subs MD Nichrome */
  --font-title: "Archivo", "Inter", sans-serif;           /* subs NB International Pro */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---- Surfaces (dark, default) ---- */
  --surface-page: rgb(0, 0, 0);           /* app background */
  --surface-card: rgb(18, 18, 18);        /* #121212 cards */
  --surface-raised: rgb(26, 26, 30);      /* #1A1A1E elevated / inputs */
  --surface-hover: rgb(36, 36, 36);       /* #242424 hover fill */
  --surface-inverse: rgb(255, 255, 255);

  /* ---- Borders ---- */
  --border-subtle: rgb(36, 36, 36);       /* hairline on dark */
  --border-default: rgb(51, 51, 51);
  --border-strong: rgb(116, 116, 116);
  --border-focus: var(--brand-neon);

  /* ---- Text ---- */
  --text-primary: rgb(255, 255, 255);
  --text-secondary: rgb(179, 179, 179);
  --text-tertiary: rgb(116, 116, 116);
  --text-disabled: rgb(102, 102, 102);
  --text-on-brand: rgb(0, 0, 0);          /* dark text on neon */
  --text-inverse: rgb(0, 0, 0);

  /* ---- Market / trade semantics ---- */
  --trade-yes: rgb(15, 197, 145);         /* #0FC591 green */
  --trade-yes-bg: rgba(15, 197, 145, 0.12);
  --trade-no: rgb(237, 80, 35);           /* #ED5023 red-orange */
  --trade-no-bg: rgba(237, 80, 35, 0.12);
  --accent-blue: rgb(0, 121, 255);        /* #0079FF */

  /* ---- Status ---- */
  --status-success: rgb(34, 197, 94);
  --status-success-bg: rgba(34, 197, 94, 0.1);
  --status-error: rgb(239, 68, 68);
  --status-error-bg: rgba(239, 68, 68, 0.1);
  --status-warning: rgb(245, 158, 11);
  --status-info: rgb(59, 130, 246);
  --status-info-bg: rgba(59, 130, 246, 0.1);

  /* ---- Radii (px) ---- */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-full: 9999px;

  /* ---- Spacing (px) ---- */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-neon: 0 0 0 1px rgba(195, 255, 0, 0.4), 0 8px 28px rgba(195, 255, 0, 0.12);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */
}

/* ---- Light surface scope (opt-in) ---- */
.light,
[data-theme="light"] {
  --surface-page: rgb(255, 255, 255);
  --surface-card: rgb(255, 255, 255);
  --surface-raised: rgb(249, 250, 251);
  --surface-hover: rgb(240, 240, 240);
  --surface-inverse: rgb(0, 0, 0);

  --border-subtle: rgb(237, 237, 237);
  --border-default: rgb(229, 229, 229);
  --border-strong: rgb(168, 168, 168);

  --text-primary: rgb(0, 0, 0);
  --text-secondary: rgb(116, 116, 116);
  --text-tertiary: rgb(168, 168, 168);
  --text-disabled: rgb(205, 205, 205);
  --text-inverse: rgb(255, 255, 255);
}