:root {
  /* Backgrounds */
  --bg-void:          #07080C;
  --bg-app:           #0E1116;
  --bg-elevated:      #161A23;
  --bg-overlay:       #1D2230;

  /* PHP brand */
  --php-500:          #777BB4;
  --php-400:          #9296D1;
  --php-300:          #B3B7E5;
  --php-600:          #5A5E9A;
  --php-glow:         #9D5BFF;

  /* Cosmic accents */
  --cosmic-cyan:      #4FC3F7;
  --cosmic-pink:      #F472B6;
  --cosmic-gold:      #FBBF24;

  /* Functional */
  --success:          #4ADE80;
  --warning:          #FBBF24;
  --error:            #F87171;

  /* Text */
  --text-primary:     #E8EAF0;
  --text-secondary:   #9CA3B5;
  --text-tertiary:    #6B7080;
  --text-disabled:    #4A4F5C;

  /* Borders */
  --border-subtle:    rgba(255, 255, 255, 0.06);
  --border-default:   rgba(255, 255, 255, 0.10);
  --border-strong:    rgba(255, 255, 255, 0.16);
  --border-glow:      rgba(157, 91, 255, 0.40);

  /* Shadows */
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:        0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-xl:        0 24px 80px rgba(0, 0, 0, 0.55);
  --glow-php:         0 0 32px rgba(157, 91, 255, 0.35);
  --glow-php-soft:    0 0 64px rgba(157, 91, 255, 0.20);
  --glow-cyan:        0 0 24px rgba(79, 195, 247, 0.30);

  /* Gradients */
  --gradient-brand:   linear-gradient(135deg, #9D5BFF 0%, #5A5E9A 100%);
  --gradient-cosmic:  linear-gradient(135deg, #9D5BFF 0%, #4FC3F7 100%);
  --gradient-hero:    radial-gradient(ellipse at center top, rgba(157, 91, 255, 0.15) 0%, transparent 60%);

  /* Typography scale */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   32px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-6xl:   80px;
  --text-display: 96px;

  /* Line heights */
  --lh-xs:    1.5;
  --lh-sm:    1.5;
  --lh-base:  1.6;
  --lh-lg:    1.5;
  --lh-xl:    1.4;
  --lh-2xl:   1.3;
  --lh-3xl:   1.2;
  --lh-4xl:   1.1;
  --lh-5xl:   1.05;
  --lh-6xl:   1.0;
  --lh-display: 1.0;

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 200ms var(--ease-out);
  --transition-slow: 250ms var(--ease-out);
  --transition-reveal: 600ms var(--ease-out);
}