/* ==============================================
   SMARTSCALE SOLUTION — Brand Token System
   Brand Guidelines v1.0 | 2026
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── Color Palette ── */
  --charcoal:    #1E1E1E;
  --terracotta:  #D87C5A;
  --terracotta-dark: #C26B49;
  --terracotta-light: #E8967A;
  --sand:        #EADCC6;
  --sand-light:  #F2EBD9;
  --ivory:       #FAF5EF;
  --stone:       #B2ACA0;
  --sage:        #8E887D;
  --white:       #FFFFFF;

  /* ── Typography ── */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* ── Font Sizes (fluid) ── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  4.5rem;     /* 72px */

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ── */
  --max-width: 1200px;
  --nav-height: 80px;

  /* ── Borders ── */
  --border-color: #EADCC6;
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-radius-lg: 12px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(30, 30, 30, 0.06), 0 1px 2px rgba(30, 30, 30, 0.04);
  --shadow-md:  0 4px 12px rgba(30, 30, 30, 0.08), 0 2px 4px rgba(30, 30, 30, 0.04);
  --shadow-lg:  0 16px 40px rgba(30, 30, 30, 0.10), 0 4px 8px rgba(30, 30, 30, 0.06);
  --shadow-xl:  0 24px 60px rgba(30, 30, 30, 0.14);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-index ── */
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}