/* ============================================
   1099Hubs Design System — Variables
   Color | Typography | Spacing | Radius | Shadow
   ============================================ */

:root {
  /* ---------- Brand Colors ---------- */

  /* Trusted Navy — Primary */
  --navy-50: #ECF1FA;
  --navy-100: #D6E0F3;
  --navy-200: #A8BFE6;
  --navy-300: #7A9DD9;
  --navy-400: #4A6FC0;
  --navy-500: #2A50A0;
  --navy-600: #1A3260;
  --navy-700: #14274D;
  --navy-800: #0F2340;
  --navy-900: #070D1A;

  /* Growth Emerald — Accent / CTA */
  --emerald-50: #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-200: #A7E0C7;
  --emerald-300: #6FCFA8;
  --emerald-400: #34B583;
  --emerald-500: #0D9F6E;
  --emerald-600: #0A8059;
  --emerald-700: #047857;
  --emerald-800: #065F46;
  --emerald-900: #064E3B;

  /* Premium Amber — Highlight */
  --amber-50: #FEF7E8;
  --amber-100: #FDEFCF;
  --amber-200: #FADCB0;
  --amber-300: #F5C885;
  --amber-400: #EFB655;
  --amber-500: #E8A020;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;

  /* Slate Foundation — Neutral */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ---------- Semantic Colors ---------- */
  --success-bg: #ECFDF5;
  --success-text: #047857;
  --success-border: #A7E0C7;

  --warning-bg: #FEF7E8;
  --warning-text: #92400E;
  --warning-border: #FADCB0;

  --error-bg: #FEE2E2;
  --error-text: #991B1B;
  --error-border: #FECACA;

  --info-bg: #DBEAFE;
  --info-text: #1E40AF;
  --info-border: #BFDBFE;

  /* ---------- Aliases (semantic usage) ---------- */
  --color-primary: var(--navy-600);
  --color-primary-hover: var(--navy-700);
  --color-primary-light: var(--navy-50);

  --color-accent: var(--emerald-500);
  --color-accent-hover: var(--emerald-600);
  --color-accent-light: var(--emerald-50);

  --color-highlight: var(--amber-500);
  --color-highlight-light: var(--amber-50);

  --color-bg: #FFFFFF;
  --color-bg-secondary: var(--slate-50);
  --color-bg-tertiary: var(--slate-100);

  --color-text: var(--slate-900);
  --color-text-secondary: var(--slate-600);
  --color-text-tertiary: var(--slate-400);

  --color-border: var(--slate-200);
  --color-border-light: var(--slate-100);
  --color-border-strong: var(--slate-300);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 720px;
  --container-wide: 1400px;

  --nav-height: 64px;

  /* ---------- Transitions ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}