@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Brand Colors */
  --color-brand-primary: #0891B2; /* Cyan 600 - RSaSh Flow base */
  --color-brand-secondary: #0E7490; /* Cyan 700 */
  
  /* Backgrounds */
  --color-bg-light: #F8FAFC; /* Slate 50 */
  --color-bg-dark: #0F172A; /* Slate 900 */
  
  /* Text */
  --color-text-primary: #0F172A;
  --color-text-secondary: #64748B; /* Slate 500 */
  
  /* State */
  --color-border: #E2E8F0; /* Slate 200 */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Product Accents */
  --color-flow: #0891B2;
  --color-fleet: #F97316; /* Orange 500 */
  --color-travel: #10B981; /* Emerald 500 */
  --color-weave: #8B5CF6; /* Violet 500 */
  --color-orbit: #06B6D4; /* Cyan 500 */

  /* Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 1rem;    /* 16px */
  --space-4: 1.5rem;  /* 24px */
  --space-5: 2rem;    /* 32px */
  --space-6: 3rem;    /* 48px */
  --space-7: 4rem;    /* 64px */
  --space-8: 6rem;    /* 96px */

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.dark {
  --color-bg-light: #0F172A;
  --color-bg-dark: #020617;
  --color-text-primary: #F8FAFC;
  --color-text-secondary: #94A3B8;
  --color-border: #1E293B;
}

body {
  background-color: var(--color-bg-light);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

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

/* Base Styles */
.container-padding {
  @apply px-4 md:px-6 lg:px-8;
}

.section-padding {
  @apply py-12 md:py-16 lg:py-24;
}