/* ============================================
   KITIFY COMMERCIAL — DESIGN SYSTEM
   Variables, Typography, Base Styles
   ============================================ */

:root {

  /* ── BASE ── */
  --base:          #0A1172;   /* Navy */
  --base-mid:      #0d1585;
  --base-light:    #111a99;
  --base-border:   #1a2aaa;

  /* ── PRIMARY COLORS ── */
  --yellow:        #FFD900;
  --yellow-dim:    #c9ab00;
  --cyan:          #00C8E0;
  --cyan-dim:      #0099ad;
  --orange:        #FF6B2B;
  --orange-dim:    #cc5520;

  /* ── SECONDARY / ACCENT ── */
  --lime:          #7BE800;
  --magenta:       #E800A0;
  --white:         #F5F6FA;
  --off-white:     #C8D0E0;
  --mid:           #6B7A99;

  /* ── TYPOGRAPHY ── */
  --font-display:  'Barlow Condensed', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --font-mono:     'DM Mono', monospace;

  /* ── SPACING ── */
  --section-pad:   120px 80px;
  --section-pad-sm: 80px 40px;

  /* ── TRANSITIONS ── */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --transition:    0.3s var(--ease);

  /* ── SHADOWS ── */
  --glow-yellow:   0 0 40px rgba(255, 217, 0, 0.2);
  --glow-cyan:     0 0 40px rgba(0, 200, 224, 0.2);
  --glow-orange:   0 0 40px rgba(255, 107, 43, 0.2);
}