/* =========================================================
   VARIABLES — START
   This file is the TechRock brand brain. Every color, font
   weight, spacing value, radius, shadow and transition used
   anywhere on the site is defined here ONCE as a CSS custom
   property. Never hardcode a hex value or a raw px spacing
   value inside a section file — reference a variable instead.
   If the brand purple ever changes, it changes here only.
   ========================================================= */

:root {

  /* ---------------------------------------------------------
     BRAND COLORS
     --------------------------------------------------------- */
  --color-primary-purple: #931CF5;
  --color-dark-purple: #5E17EB;
  --color-light-purple: #EECAFF;
  --color-pale-purple: #D8CEFE;

  --color-white: #FFFFFF;
  --color-black: #000000;

  --color-light-gray: #EEEEEE;
  --color-dark-gray: #383838;

  --color-primary-text: #101522;
  --color-secondary-text: #5F6472;
  --color-muted-text: #7A7F8C;

  --color-success: #00C853;
  --color-lime: #E0FF03;

  --color-transparent: transparent;

  /* Brand gradient — use only where a gradient is explicitly needed */
  --gradient-primary: linear-gradient(135deg, #5E17EB, #931CF5);

  /* ---------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------- */
  --font-primary: "Manrope", sans-serif;

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ---------------------------------------------------------
     LAYOUT
     --------------------------------------------------------- */
  --container-width: 1440px;

  --page-padding-desktop: 64px;
  --page-padding-tablet: 40px;
  --page-padding-mobile: 20px;

  /* ---------------------------------------------------------
     BORDER RADIUS
     --------------------------------------------------------- */
  --radius-small: 8px;
  --radius-medium: 14px;
  --radius-large: 20px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------
     TRANSITIONS
     --------------------------------------------------------- */
  --transition-fast: 180ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* ---------------------------------------------------------
     SHADOWS
     Derived only from brand-neutral navy, never an unrelated color.
     --------------------------------------------------------- */
  --shadow-soft: 0 10px 40px rgba(16, 21, 34, 0.08);
  --shadow-medium: 0 16px 48px rgba(16, 21, 34, 0.12);
  --shadow-button: 0 8px 20px rgba(147, 28, 245, 0.25);

  /* ---------------------------------------------------------
     SPACING SCALE
     --------------------------------------------------------- */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* ---------------------------------------------------------
     Z-INDEX SCALE
     Centralized so stacking order is predictable across sections.
     --------------------------------------------------------- */
  --z-header: 100;
  --z-mobile-menu: 200;
  --z-modal: 300;
}

/* =========================================================
   VARIABLES — END
   ========================================================= */