@import 'tailwindcss';
@import 'uniwind';

@source "../components";

/* react-native-web writes `font: 14px <system-stack>` on every Text/View as a
   shorthand — that also sets `font-family`, which silently overrides our
   `--font-sans`. Force it back globally with `!important`, unlayered so it
   beats RNW's runtime-injected rules. Only bites on the web target; on
   native this CSS never runs. */
*,
::before,
::after {
  font-family:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif !important;
}

/* Let the document surface track the theme's background token so the Storybook
   canvas flips light <-> dark alongside `Uniwind.setTheme()`. Native is
   unaffected — this only runs on the web target. */
html,
body {
  background-color: var(--color-background);
  color: var(--color-foreground);
}

@theme {
  --radius: 10px;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --spacing-hairline: hairlineWidth();

  /* Inter first (loaded by Storybook, mimics iOS SF Pro cross-platform),
     then the real SF Pro on Apple devices, falling back to system fonts
     everywhere else. */
  --font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --color-val-red: #ff4655;
  --color-val-green: #22ffc5;
  --color-val-yellow: #f0cb74;
  --color-val-white: #ede9e2;
  --color-val-blue: #17212b;
  --color-val-gray: #121212;
}

@layer theme {
  :root {
    @variant light {
      /* Pure white base — matches splash screen #FFFFFF */
      --color-val-green-ui: #009970;
      --color-val-yellow-ui: #b8942a;
      --color-icon-muted: rgba(0, 0, 0, 0.4);
      --color-party-border: rgba(0, 0, 0, 0.15);
      --color-background: oklch(1 0 0);
      --color-foreground: oklch(0.13 0 0);
      --color-card: oklch(0.96 0.005 60);
      --color-card-foreground: oklch(0.13 0 0);
      --color-popover: oklch(0.96 0.005 60);
      --color-popover-foreground: oklch(0.13 0 0);
      --color-primary: oklch(0.13 0 0);
      --color-primary-foreground: oklch(1 0 0);
      --color-secondary: oklch(0.92 0.005 60);
      --color-secondary-foreground: oklch(0.13 0 0);
      --color-muted: oklch(0.92 0.005 60);
      --color-muted-foreground: oklch(0.45 0 0);
      --color-accent: oklch(0.92 0.005 60);
      --color-accent-foreground: oklch(0.13 0 0);
      --color-destructive: oklch(0.577 0.245 27.325);
      --color-border: oklch(0 0 0 / 12%);
      --color-input: oklch(0 0 0 / 10%);
      --color-ring: oklch(0.6 0 0);
      --color-chart-1: oklch(0.646 0.222 41.116);
      --color-chart-2: oklch(0.6 0.118 184.704);
      --color-chart-3: oklch(0.398 0.07 227.392);
      --color-chart-4: oklch(0.828 0.189 84.429);
      --color-chart-5: oklch(0.769 0.188 70.08);
      --color-sidebar: oklch(0.92 0.005 60);
      --color-sidebar-foreground: oklch(0.13 0 0);
      --color-sidebar-primary: oklch(0.13 0 0);
      --color-sidebar-primary-foreground: oklch(1 0 0);
      --color-sidebar-accent: oklch(0.96 0.006 60);
      --color-sidebar-accent-foreground: oklch(0.13 0 0);
      --color-sidebar-border: oklch(0 0 0 / 12%);
      --color-sidebar-ring: oklch(0.6 0 0);
    }

    @variant dark {
      /* iOS-style dark gray base — matches splash screen #1C1C1E */
      --color-val-green-ui: #22ffc5;
      --color-val-yellow-ui: #f0cb74;
      --color-icon-muted: rgba(237, 233, 226, 0.4);
      --color-party-border: rgba(255, 255, 255, 0.25);
      --color-background: oklch(0.20 0.004 286);
      --color-foreground: oklch(0.93 0.006 60);
      --color-card: oklch(0.27 0.004 286);
      --color-card-foreground: oklch(0.93 0.006 60);
      --color-popover: oklch(0.27 0.004 286);
      --color-popover-foreground: oklch(0.93 0.006 60);
      --color-primary: oklch(0.93 0.006 60);
      --color-primary-foreground: oklch(0.20 0.004 286);
      --color-secondary: oklch(0.33 0.003 286);
      --color-secondary-foreground: oklch(0.93 0.006 60);
      --color-muted: oklch(0.33 0.003 286);
      --color-muted-foreground: oklch(0.55 0 0);
      --color-accent: oklch(0.33 0.003 286);
      --color-accent-foreground: oklch(0.93 0.006 60);
      --color-destructive: oklch(0.704 0.191 22.216);
      --color-border: oklch(1 0 0 / 12%);
      --color-input: oklch(1 0 0 / 10%);
      --color-ring: oklch(0.45 0 0);
      --color-chart-1: oklch(0.488 0.243 264.376);
      --color-chart-2: oklch(0.696 0.17 162.48);
      --color-chart-3: oklch(0.769 0.188 70.08);
      --color-chart-4: oklch(0.627 0.265 303.9);
      --color-chart-5: oklch(0.645 0.246 16.439);
      --color-sidebar: oklch(0.17 0.004 286);
      --color-sidebar-foreground: oklch(0.93 0.006 60);
      --color-sidebar-primary: oklch(0.488 0.243 264.376);
      --color-sidebar-primary-foreground: oklch(0.93 0.006 60);
      --color-sidebar-accent: oklch(0.24 0.004 286);
      --color-sidebar-accent-foreground: oklch(0.93 0.006 60);
      --color-sidebar-border: oklch(1 0 0 / 12%);
      --color-sidebar-ring: oklch(0.45 0 0);
    }
  }
}