/* ============================================
   PEKIN DIGITAL AGENCY — CSS CUSTOM PROPERTIES
   ============================================ */

:root {

  /* ─── Colors: Backgrounds ─── */
  --color-bg-primary:    #0a0a0f;
  --color-bg-secondary:  #0d0d15;
  --color-bg-card:       #111120;
  --color-bg-elevated:   #13131f;

  /* ─── Colors: Accents ─── */
  --color-accent-blue:       #00d4ff;
  --color-accent-purple:     #7b2fff;
  --color-accent-green:      #00ff88;
  --color-accent-gradient:   linear-gradient(135deg, #00d4ff 0%, #7b2fff 100%);
  --color-accent-gradient-r: linear-gradient(135deg, #7b2fff 0%, #00d4ff 100%);

  /* ─── Colors: Text ─── */
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.75);
  --color-text-muted:     rgba(255, 255, 255, 0.45);
  --color-text-disabled:  rgba(255, 255, 255, 0.25);

  /* ─── Colors: Glass / Border ─── */
  --color-glass:        rgba(255, 255, 255, 0.04);
  --color-glass-hover:  rgba(255, 255, 255, 0.07);
  --color-glass-border: rgba(255, 255, 255, 0.08);
  --color-glass-border-hover: rgba(0, 212, 255, 0.3);

  /* ─── Colors: Neon Glows ─── */
  --color-neon-blue-glow:   rgba(0, 212, 255, 0.15);
  --color-neon-purple-glow: rgba(123, 47, 255, 0.15);

  /* ─── Glow / Shadow Values ─── */
  --glow-blue:         0 0 20px rgba(0, 212, 255, 0.35), 0 0 60px rgba(0, 212, 255, 0.15);
  --glow-purple:       0 0 20px rgba(123, 47, 255, 0.35), 0 0 60px rgba(123, 47, 255, 0.15);
  --glow-blue-intense: 0 0 30px rgba(0, 212, 255, 0.6),  0 0 80px rgba(0, 212, 255, 0.25), 0 0 120px rgba(0, 212, 255, 0.1);
  --glow-purple-intense: 0 0 30px rgba(123, 47, 255, 0.6), 0 0 80px rgba(123, 47, 255, 0.25);
  --shadow-card:       0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-elevated:   0 8px 48px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06) inset;

  /* ─── Typography ─── */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-base:   1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.12em;

  /* ─── Spacing System ─── */
  --space-xs:   0.25rem;   /*  4px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   0.75rem;   /* 12px */
  --space-base: 1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */

  /* ─── Border Radius ─── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ─── Transitions ─── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-ease:   300ms ease;

  /* ─── Z-Index Layers ─── */
  --z-base:    1;
  --z-above:   10;
  --z-modal:   100;
  --z-nav:     200;
  --z-overlay: 500;
  --z-cursor:  9999;

  /* ─── Container & Grid ─── */
  --container-max:     1280px;
  --container-padding: clamp(1rem, 5vw, 2rem);
  --grid-gap:          1.5rem;
  --grid-gap-lg:       2rem;

  /* ─── Section Spacing ─── */
  --section-padding-y: clamp(5rem, 10vw, 7.5rem);

  /* ─── Navbar ─── */
  --navbar-height:      72px;
  --navbar-bg:          rgba(10, 10, 15, 0.8);
  --navbar-border:      rgba(255, 255, 255, 0.06);
  --navbar-blur:        16px;
}