/* ============================================
   variables.css — KlickMove Design Tokens
   ============================================ */
:root {
  /* Brand palette */
  --km-primary: #FF6B00;
  --km-primary-dark: #E05A00;
  --km-secondary: #1A1A2E;
  --km-accent: #E94560;
  --km-light-bg: #F8F9FA;
  --km-dark-bg: #0F0F1A;
  --km-text: #2D2D2D;
  --km-text-light: #6B7280;
  --km-white: #FFFFFF;
  --km-border: #E7E9EE;
  --km-success: #16A34A;
  --km-warning: #F59E0B;

  /* Gradients */
  --km-gradient: linear-gradient(135deg, #FF6B00 0%, #E94560 100%);
  --km-gradient-soft: linear-gradient(135deg, rgba(255,107,0,.12), rgba(233,69,96,.12));
  --km-gradient-dark: linear-gradient(135deg, #1A1A2E 0%, #0F0F1A 100%);

  /* Typography */
  --font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Radius & shadows */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  --shadow-card: 0 20px 60px rgba(15, 15, 26, .10);
  --shadow-hover: 0 28px 70px rgba(15, 15, 26, .16);
  --shadow-sm: 0 6px 22px rgba(15, 15, 26, .08);
  --shadow-btn: 0 12px 30px rgba(255, 107, 0, .35);

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --section-pad: clamp(4rem, 8vw, 7rem);
  --header-h: 80px;
  --topbar-h: 40px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .25s;
  --t-med: .45s;

  /* Z-index scale */
  --z-header: 100;
  --z-overlay: 200;
  --z-loader: 1000;
  --z-cursor: 1200;
}