global.css

/*
 * Tailwind v4 + NativeWind v5 entry — and the SINGLE source of truth for theming.
 * Re-brand the app by editing the token VALUES in the @layer base block below.
 * (See the three-part structure: tokens → @theme inline → @source.)
 */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
@import "nativewind/theme";

/*
 * React Native Reusables design tokens (shadcn/ui "new-york", neutral base).
 * Tokens are stored as FULL color values (hsl(...)), not bare HSL channels.
 * This matters on native: react-native-css composes opacity modifiers like
 * `bg-primary/90` cleanly from a full color, but re-resolving `hsl(var(--x))`
 * + opacity on a theme change repaints and FLICKERS. Full colors avoid that.
 * Light is the default; dark overrides apply via prefers-color-scheme, which
 * is what NativeWind v5 maps the `dark:` variant to.
 */
@layer base {
  :root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(0 0% 3.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(0 0% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(0 0% 3.9%);
    --primary: hsl(0 0% 9%);
    --primary-foreground: hsl(0 0% 98%);
    --secondary: hsl(0 0% 96.1%);
    --secondary-foreground: hsl(0 0% 9%);
    --muted: hsl(0 0% 96.1%);
    --muted-foreground: hsl(0 0% 45.1%);
    --accent: hsl(0 0% 96.1%);
    --accent-foreground: hsl(0 0% 9%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 89.8%);
    --input: hsl(0 0% 89.8%);
    --ring: hsl(0 0% 63%);
    --radius: 0.625rem;
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --background: hsl(0 0% 3.9%);
      --foreground: hsl(0 0% 98%);
      --card: hsl(0 0% 3.9%);
      --card-foreground: hsl(0 0% 98%);
      --popover: hsl(0 0% 3.9%);
      --popover-foreground: hsl(0 0% 98%);
      --primary: hsl(0 0% 98%);
      --primary-foreground: hsl(0 0% 9%);
      --secondary: hsl(0 0% 14.9%);
      --secondary-foreground: hsl(0 0% 98%);
      --muted: hsl(0 0% 14.9%);
      --muted-foreground: hsl(0 0% 63.9%);
      --accent: hsl(0 0% 14.9%);
      --accent-foreground: hsl(0 0% 98%);
      --destructive: hsl(0 70.9% 59.4%);
      --destructive-foreground: hsl(0 0% 98%);
      --border: hsl(0 0% 14.9%);
      --input: hsl(0 0% 14.9%);
      --ring: hsl(300 0% 45%);
      --chart-1: hsl(220 70% 50%);
      --chart-2: hsl(160 60% 45%);
      --chart-3: hsl(30 80% 55%);
      --chart-4: hsl(280 65% 60%);
      --chart-5: hsl(340 75% 55%);
    }
  }
}

/*
 * Map the tokens to Tailwind color/radius utilities. Tokens are already full
 * colors, so reference them directly (no hsl(var()) wrapping). `inline` keeps
 * the var() references live so the dark-mode overrides above resolve at runtime.
 */
@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);

  /*
   * Concrete radius values (base --radius is 0.625rem = 10px). We do NOT use
   * calc(var(--radius) ± Npx) here: react-native-css does not resolve nested
   * calc()/var() chains on native, so rounded-* would collapse to 0 (square
   * corners) on device while looking correct on web. Hard-coding the rems keeps
   * native and web identical.
   */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.875rem;
}

/*
 * Monorepo class detection. Tailwind auto-scans this app's source, but workspace
 * packages are symlinked and not traversed by default — register the UI-Kit's
 * source explicitly so classes used only inside @repo/ui are not purged.
 */
@source "../../../packages/ui/src/**/*.{ts,tsx}";