@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

/* Igbadun Design System - Global Styles */

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;

  /* Spacing / Gaps (responsive calc based on typography clamps) */
  --spacing-0: 0rem;
  --spacing-100: calc(var(--b1-vw-base) * 0.125);
  --spacing-200: calc(var(--b1-vw-base) * 0.25);
  --spacing-300: calc(var(--b1-vw-base) * 0.375);
  --spacing-400: calc(var(--b1-vw-base) * 0.5);
  --spacing-500: calc(var(--b1-vw-base) * 0.625);
  --spacing-600: calc(var(--b1-vw-base) * 0.75);
  --spacing-700: calc(var(--b1-vw-base) * 0.875);
  --spacing-800: calc(var(--b1-vw-base) * 1.0);
  --spacing-900: calc(var(--b1-vw-base) * 1.125);
  --spacing-1000: calc(var(--b1-vw-base) * 1.25);
  --spacing-1200: calc(var(--b1-vw-base) * 1.5);
  --spacing-1400: calc(var(--b1-vw-base) * 1.75);
  --spacing-1600: calc(var(--b1-vw-base) * 2.0);
  --spacing-1800: calc(var(--b1-vw-base) * 2.25);
  --spacing-2000: calc(var(--b1-vw-base) * 2.5);
  --spacing-2500: calc(var(--b1-vw-base) * 3.0);
  --spacing-3000: calc(var(--b1-vw-base) * 3.5);
  --spacing-3500: calc(var(--b1-vw-base) * 4.0);
  --spacing-4000: calc(var(--b1-vw-base) * 4.5);
  --spacing-4500: calc(var(--b1-vw-base) * 5.0);
  --spacing-5000: calc(var(--b1-vw-base) * 6.0);

  /* Icon sizes (derived from 16px baseline) */
  --charm-size-2xs: 0.75rem;
  --charm-size-xs: 1rem;
  --charm-size-s: 1.25rem;
  --charm-size-m: 1.5rem;
  --charm-size-l: 2rem;
  --charm-size-xl: 2.5rem;
  --charm-size-2xl: 3rem;
  --charm-size-3xl: 4rem;
  --charm-size-4xl: 4.5rem;
  --charm-size-5xl: 6rem;
}

.indigo {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
}

* {
  box-sizing: border-box;
  border-color: hsl(var(--border));
}

body {
  margin: 0;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Urbanist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}