/* ============================================
   variables.css — Design Tokens v4
   Crazy Agency | Pure Suprematika Minimalist
   NO GRADIENTS — Solid dark buttons only
   ============================================ */

:root {
  /* ================================================
     BACKGROUNDS — Pure White Minimalist
  ================================================ */
  --bg-primary:      #FFFFFF;
  --bg-surface:      #F8FAFC;
  --bg-muted:        #F1F5F9;
  --bg-muted-2:      #F8FAFC;
  --bg-glass:        rgba(255,255,255,.94);
  --bg-glass-heavy:  rgba(255,255,255,.99);

  /* ================================================
     ACCENT COLORS — Reference only (logo/icons)
     Do NOT apply as backgrounds or button fills
  ================================================ */
  --clr-1: #FF5722;
  --clr-2: #FFC107;
  --clr-3: #E91E63;
  --clr-4: #CDDC39;
  --clr-5: #4CAF50;
  --clr-6: #2196F3;

  /* Gradient refs — kept for reference, NOT used in UI */
  --gradient-brand:  linear-gradient(135deg, #FFC107 0%, #FF5722 20%, #E91E63 40%, #CDDC39 60%, #4CAF50 80%, #2196F3 100%);
  --gradient-cta:    linear-gradient(135deg, #FF5722 0%, #E91E63 100%);
  --gradient-cool:   linear-gradient(135deg, #4CAF50, #2196F3);
  --gradient-warm:   linear-gradient(135deg, #FFC107, #FF5722);
  --gradient-subtle: none;

  /* ================================================
     SOLID BUTTON SYSTEM — No gradients
  ================================================ */
  --btn-primary-bg:    #0F172A;
  --btn-primary-hover: #1E293B;
  --btn-primary-text:  #FFFFFF;

  /* ================================================
     TEXT — Slate Palette for High Contrast
  ================================================ */
  --text-primary:   #0F172A;
  --text-secondary: #334155;
  --text-muted:     #64748B;
  --text-light:     #94A3B8;
  --text-white:     #FFFFFF;

  /* ================================================
     BORDERS — Clean 1px E2E8F0 System
  ================================================ */
  --border:        #E2E8F0;
  --border-medium: #CBD5E1;
  --border-strong: #94A3B8;
  --border-glass:  rgba(255,255,255,.6);

  /* ================================================
     SHADOWS — Very Subtle for Flat Design
  ================================================ */
  --shadow-xs:   0 1px 2px  rgba(15,23,42,.04);
  --shadow-sm:   0 1px 3px  rgba(15,23,42,.06);
  --shadow-md:   0 4px 12px rgba(15,23,42,.07);
  --shadow-lg:   0 8px 24px rgba(15,23,42,.08);
  --shadow-xl:   0 16px 48px rgba(15,23,42,.09);

  /* ================================================
     TYPOGRAPHY
  ================================================ */
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:    'Inter', 'Plus Jakarta Sans', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.125rem;
  --text-2xl:  1.25rem;
  --text-3xl:  1.5rem;

  --title-section: 1.75rem;
  --title-hero:    clamp(2rem, 4vw, 2.5rem);
  --title-card:    1.0625rem;

  /* ================================================
     LAYOUT
  ================================================ */
  --section-py:    88px;
  --container-max: 1160px;
  --container-px:  24px;
  --nav-height:    60px;

  /* ================================================
     RADII
  ================================================ */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ================================================
     EASING & TRANSITIONS
  ================================================ */
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:      all 0.2s var(--ease);
  --transition-slow: all 0.40s var(--ease);
  --transition-fast: all 0.12s var(--ease);

  /* ================================================
     Z-INDEX SCALE
  ================================================ */
  --z-nav:      100;
  --z-modal:    200;
  --z-service:  300;
  --z-blog:     350;
  --z-inquiry:  400;
  --z-cursor:   9999;
}