/* Design tokens. Edit values here; every other stylesheet reads them. */
:root {
  /* Colors */
  --white: #ffffff;
  --surface: #faf9fd;
  --gray-50: #f3f2f7;
  --brand-50: #f2effd;
  --brand-100: #dcd5f8;
  --brand: #5b3fd6;
  --brand-hover: #4a31b8;
  --brand-deep: #33227f;
  --text: #1b1730;
  --text-2: #5e5a72;
  --border: #e2dfec;
  /* Status colors: ONLY inside product mockups */
  --green: #12805c;
  --amber: #e8a317;
  --red: #d6455d;

  /* Typography */
  --font: "Manrope", -apple-system, "Segoe UI", Arial, sans-serif;

  /* Spacing (8px grid) */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s8: 64px;
  --s10: 80px;
  --s12: 96px;

  /* Radii */
  --r-card: 14px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-pill: 10px; /* buttons, chips, nav links: rounded rectangles, not full pills */

  /* Shadows */
  --shadow-soft: 0 1px 2px rgba(27, 23, 48, 0.08), 0 4px 16px rgba(27, 23, 48, 0.08);
  --shadow-lift: 0 8px 28px rgba(27, 23, 48, 0.18);
  --shadow-header: 0 1px 3px rgba(27, 23, 48, 0.15);

  /* Layout */
  --header-h: 64px;
  --container: 1200px;
}

@media (min-width: 900px) {
  :root { --header-h: 72px; }
}