/* =========================================
   CREJENCE — DESIGN VARIABLES
   ========================================= */

:root {
  /* Brand colors */
  --color-plum: #4a173c;
  --color-charcoal: #29272b;
  --color-gray: #a7a9ac;;
  --color-light-gray: #e8e8ea;
  --color-white: #ffffff;

  /* Text and backgrounds */
  --color-text: var(--color-charcoal);
  --color-text-muted: #66666b;
  --color-background: var(--color-white);
  --color-surface: #f7f7f8;
  --color-border: var(--color-light-gray);

  /* Typography — temporary system font */
  --font-body: Arial, Helvetica, sans-serif;

  /* Layout */
  --container-width: 1200px;
  --page-gutter: clamp(20px, 5vw, 64px);
  --section-spacing: clamp(64px, 8vw, 112px);

  /* Corners */
  --radius-small: 6px;
  --radius-medium: 12px;
  --radius-large: 20px;

  /* Effects */
  --shadow-card: 0 8px 24px rgb(41 39 43 / 8%);

  /* Transitions */
  --transition-fast: 180ms ease;
  --transition-normal: 280ms ease;
}