/*
 * Shared Tailwind v4 design tokens for Top Casino SG.
 * Sourced from Figma "Element" page, node 3006:8990 (Color Pallet / Button Styling / Star Rating).
 * Imported by both web/ and admin/ globals.css — keep this file the single source of truth
 * so both apps stay visually in sync. See docs/theme.md for the full extraction notes.
 */
/* Class-based dark mode: toggled per-user (stored in admin_users.theme_preference),
   not tied to OS preference — see admin/src/lib/theme.ts. */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-figtree: "Figtree", ui-sans-serif, system-ui, sans-serif;

  /* Primary — indigo (brand) */
  --color-primary-50: #e7e9f4;
  --color-primary-100: #c3c8e5;
  --color-primary-200: #9da4d3;
  --color-primary-300: #7781c1;
  --color-primary-400: #5a65b4;
  --color-primary-500: #3e4ba8;
  --color-primary-600: #38439e;
  --color-primary-700: #2f3a92;
  --color-primary-800: #273086;
  --color-primary-900: #1a1e71;
  /* Used only as the far end of the primary button hover gradient, not part of the numbered scale */
  --color-primary-glow: #3139d7;

  /* Secondary — amber/orange (accent, CTAs) */
  --color-secondary-50: #fdf8e1;
  --color-secondary-100: #fbedb4;
  --color-secondary-200: #fae183;
  --color-secondary-300: #f8d650;
  --color-secondary-400: #f7cc2a;
  --color-secondary-500: #f7c30b;
  --color-secondary-600: #f7b500;
  --color-secondary-700: #f7a300;
  --color-secondary-800: #f89200;
  --color-secondary-900: #f87300;

  /* Status */
  --color-success: #00bb9e;
  --color-success-subtle: #e6f9f6;
  --color-danger: #ff4553;
  --color-star: #ffd54e;

  /* Semantic surface/text/border tokens — pair with `dark:` for theme
     switching instead of hardcoding primary-50/900 in every component. */
  --color-surface: #ffffff;
  --color-surface-dark: #12141a;
  --color-surface-muted: var(--color-primary-50);
  --color-surface-muted-dark: #1c1f27;
  --color-text: var(--color-primary-900);
  --color-text-dark: #e7e9f0;
  --color-text-muted: var(--color-primary-500);
  --color-text-muted-dark: #9096a8;
  --color-border: var(--color-primary-100);
  --color-border-dark: #2a2e37;

  /* Bonus calculator widget (Figma "Var / Calculator") — a fixed dark
     card regardless of the page theme. */
  --color-calc-surface: #2b2b2b;
  --color-calc-panel: #494949;
  --color-calc-field: #3c3b3c;
  --color-calc-field-border: #636363;

  /* Sidebar — fixed brand color regardless of the user's light/dark choice. */
  --color-sidebar: var(--color-primary-600);
  --color-sidebar-active: var(--color-primary-700);
}