@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

/* Platform font fallbacks so typographic scale behaves consistently. */
@media android {
  :root {
    --font-sans: normal;
    --font-serif: serif;
    --font-mono: monospace;
    --font-rounded: normal;
  }
}

@media ios {
  :root {
    --font-sans: system-ui;
    --font-serif: ui-serif;
    --font-mono: ui-monospace;
    --font-rounded: ui-rounded;
  }
}

@layer theme {
  @theme {
    --color-brand-50: #f5f7ff;
    --color-brand-100: #e9edff;
    --color-brand-500: #4f6bd9;
    --color-brand-700: #3147a6;
  }
}