/*
 * Kwalee BI — Base styles
 * Loads Google Fonts and applies design tokens as CSS custom properties.
 * Auto-loaded by Dash via assets/ directory.
 */

@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Primary — Yellow (Kwalee Brand) */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;

  /* Secondary — Sky */
  --color-sky-500: #0ea5e9;

  /* Neutral */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  /* Extended palette — green */
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-700: #15803d;

  /* Extended palette — amber */
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-700: #b45309;

  /* Extended palette — red */
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-700: #b91c1c;

  /* Semantic */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-heading: "Unbounded", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, sans-serif;
  --font-code: "JetBrains Mono", monospace;
  --font-mono: "JetBrains Mono", monospace;

  /* Semantic aliases used by chart/table tiles */
  --color-primary: #eab308;
  --color-secondary: #0ea5e9;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
}

/* Global reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide Dash's built-in initial loading text (shown before React hydrates) */
._dash-loading {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}