/* ==========================================================================
   THE BLUE BALE — Design Tokens & CSS Variables
   WordPress Astra Child Theme Compatible
   ========================================================================== */

:root {
  /* Brand Palette (Strictly restricted, subtle blue accent) */
  --color-bg: #08090b;
  --color-surface: #111318;
  --color-surface-elevated: #161920;
  --color-surface-hover: #1c212b;
  --color-text: #f5f7fa;
  --color-text-dim: #cbd2dc;
  --color-muted: #969ba5;
  --color-accent: #3d8cff;
  --color-accent-hover: #2976eb;
  --color-accent-soft: rgba(61, 140, 255, 0.12);
  --color-accent-glow: rgba(61, 140, 255, 0.55);
  
  /* Borders & Dividers */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.15);
  --color-border-accent: rgba(61, 140, 255, 0.35);

  /* Typography */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing Scale */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2.5rem;    /* 40px */
  --space-xl: 4rem;      /* 64px */
  --space-2xl: 6.5rem;   /* 104px */
  --space-3xl: 9rem;     /* 144px */

  /* Layout Container - 100% Content Width from Header to Footer */
  --container-max-width: 100%;
  --container-padding: 1.25rem;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index Hierarchy */
  --z-canvas: 1;
  --z-content: 10;
  --z-floating-cta: 50;
  --z-header: 100;
  --z-overlay: 200;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 2.5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-padding: 3rem;
  }
}