/* ===========================
   CONNEKKT DESIGN TOKENS
   The single source of truth for the visual language.
   =========================== */

:root {
  /* --- Backgrounds --- */
  --bg-base: #0A0A0F;
  --bg-surface: #15151D;
  --bg-elevated: #1E1E29;

  /* --- Text --- */
  --text-primary: #F4F4F8;
  --text-secondary: #A8A8B8;
  --text-muted: #6B6B7B;

  /* --- Category colors (pulled from the logo gradient) --- */
  --cat-designer: #FF3D5A;       /* coral red — rounded square */
  --cat-photographer: #00B8A9;   /* teal — circle */
  --cat-videographer: #E91E63;   /* hot magenta — diamond */
  --cat-musician: #FFB23F;       /* amber — hexagon */
  --cat-uiux: #3D8BFF;           /* electric blue — rounded rect */
  --cat-marketer: #A8E03A;       /* lime — triangle */
  --cat-writer: #7B3FE4;         /* violet — pill */
  --cat-illustrator: #FF6B35;    /* orange — blob */
  --cat-3d: #FF4FA3;             /* pink — cube */
  --cat-model: #F5B5C5;          /* rose — oval */
  --cat-fashion: #C2185B;        /* deep magenta — rhombus */
  --cat-dancer: #00D4E0;         /* cyan — starburst */

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Typography --- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* --- Motion --- */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Reset --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}