/* ============================================================
   LeanSupplAI Design System
   Single source of truth for colors, typography, spacing, shadows.
   Import this file FIRST on every page.
   ============================================================ */

:root {
  /* ---- Brand Colors ---- */
  --color-primary:        #1a365d;
  --color-primary-hover:  #2a4a7f;
  --color-primary-light:  #ebf4ff;
  --color-accent:         #3182ce;
  --color-accent-light:   #90cdf4;
  --color-accent-bg:      #bee3f8;

  /* ---- Neutral Palette ---- */
  --color-gray-50:        #f7fafc;
  --color-gray-100:       #f0f5fa;
  --color-gray-200:       #e2e8f0;
  --color-gray-300:       #cbd5e0;
  --color-gray-400:       #a0aec0;
  --color-gray-500:       #718096;
  --color-gray-600:       #4a5568;
  --color-gray-700:       #2d3748;
  --color-gray-800:       #1f2937;
  --color-gray-900:       #0f2744;

  /* ---- Semantic Colors ---- */
  --color-success:        #276749;
  --color-success-bg:     #f0fff4;
  --color-warning:        #92400e;
  --color-warning-bg:     #fffbeb;
  --color-danger:         #c53030;
  --color-danger-bg:      #fff5f5;

  /* ---- Typography ---- */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-size-xs:         0.75rem;   /* 12px */
  --font-size-sm:         0.85rem;   /* ~14px */
  --font-size-base:       1rem;      /* 16px */
  --font-size-md:         1.05rem;   /* ~17px */
  --font-size-lg:         1.25rem;   /* 20px */
  --font-size-xl:         1.5rem;    /* 24px */
  --font-size-2xl:        2rem;      /* 32px */
  --font-size-3xl:        2.25rem;   /* 36px */
  --font-size-4xl:        3rem;      /* 48px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-tight:    1.15;
  --line-height-snug:     1.3;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.65;

  /* ---- Spacing Scale (4px base) ---- */
  --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 */

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

  /* ---- Shadows ---- */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl:   0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 4px 12px rgba(26, 54, 93, 0.25);

  /* ---- Transitions ---- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.3s ease;

  /* ---- Layout ---- */
  --max-width-content: 1100px;
  --max-width-wide:    1200px;
  --nav-height:        56px;
}

/* ---- Dark CTA / Footer surface ---- */
.surface-dark {
  --surface-bg:   var(--color-primary);
  --surface-text: #ffffff;
  --surface-muted: #a0c4e8;
}

.surface-darker {
  --surface-bg:   var(--color-gray-900);
  --surface-text: var(--color-gray-400);
}