/* ==========================================================================
   DESIGN TOKENS
   Single source of truth for color, spacing, and shape. Every component
   file below reads from these variables instead of hard-coding values, so
   the entire site can be re-themed from this one file.
   ========================================================================== */
:root {
  /* Brand */
  --primary: #ffffff;
  --primary-dark: #ffffff;
  --primary-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark));
  --secondary: #f1f1f1;

  /* Neutrals */
  --dark: #1c1d21;
  --light-bg: #1f1f1f;
  --text-main: #f7f5f5;
  --text-muted: #d3d3d3;
  --text-inverse: #ffffff;
  --text-inverse-muted: #f5f5f9;

  /* Surfaces */
  --card-bg: rgba(255, 255, 255, 0.048);
  --card-stroke: rgba(255, 255, 255, 0.5);
  --surface-dark: rgba(15, 23, 42, 0.45);
  --surface-dark-stroke: rgba(255, 255, 255, 0.08);
  --border-color: rgba(15, 23, 42, 0.08);

  /* Elevation & blur */
  --shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.15);
  --blur: blur(20px);
  --blur-sm: blur(10px);

  /* Shape */
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* Layout */
  --header-height: 84px;
  --content-width: 1140px;
}