:root {
  /* Color — brand */
  --crx-white: #ffffff;
  --crx-white-30: #ffffff4d;
  --crx-dark: #2b2b2b;
  --crx-dark-60: #2b2b2b99;
  --crx-dark-30: #2b2b2b4d;
  --crx-ink: #333;
  --crx-gray: #6b6b6b;
  --crx-yellow: #eadab7;
  --crx-yellow-10: #eadab71a;
  --crx-yellow-badge: #ffedbf;
  --crx-sky: #b0d9ff;
  --crx-sky-60: #b0d9ff99;
  --crx-sky-30: #b0d9ff4d;
  --crx-sky-10: #b0d9ff1a;
  --crx-divider: #9cadbb;

  /* Color — semantic */
  --crx-color-text: var(--crx-dark);
  --crx-color-text-muted: var(--crx-dark-60);
  --crx-color-heading: var(--crx-dark);
  --crx-color-on-dark: var(--crx-white);
  --crx-color-bg: var(--crx-white);
  --crx-color-btn-bg: var(--crx-dark);
  --crx-color-btn-text: var(--crx-white);
  --crx-color-border: var(--crx-divider);

  /* Legacy names used by older sheets — mapped off peach */
  --primary-color: var(--crx-dark);
  --primary-gradient: var(--crx-dark);
  --secondary-color: var(--crx-yellow);
  --accent-color: var(--crx-dark);
  --text-primary: var(--crx-ink);
  --text-secondary: var(--crx-gray);
  --text-muted: var(--crx-gray);
  --border-color: var(--crx-divider);
  --border-light: var(--crx-divider);
  --bg-primary: var(--crx-white);
  --bg-secondary: var(--crx-white);
  --bg-tertiary: var(--crx-white);
  --success-color: #28a745;
  --error-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: var(--crx-ink);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: var(--crx-radius-btn);
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --transition-fast: 0.2s ease;
  --transition-base: var(--crx-ease);
  --transition-slow: 0.4s ease;

  /* Type — families (Figma uses Inter; Instrument Sans is the cart badge) */
  --crx-font: "Inter", sans-serif;
  --crx-font-badge: "Instrument Sans", "Inter", sans-serif;

  /* Type — sizes (desktop) */
  --crx-fs-jumbo: 72px;
  --crx-fs-h1: 42px;
  --crx-fs-h2: 24px;
  --crx-fs-h3: 24px;
  --crx-fs-body: 18px;
  --crx-fs-tag: 16px;
  --crx-fs-small: 14px;
  --crx-fs-eyebrow: 14px;
  --crx-fs-btn: 18px;
  --crx-fs-btn-lg: 20px;
  --crx-fs-badge: 10px;

  /* Type — weight / line-height / tracking
     Figma letterSpacing 5 ≈ 5% → 0.05em */
  --crx-lh-jumbo: 1.2;
  --crx-lh-h1: 1.1;
  --crx-lh-title: 1.2;
  --crx-lh-body: 1.4;
  --crx-lh-small: 1.2;
  --crx-track-jumbo: 0.05em;
  --crx-track-eyebrow: 0.1em;
  --crx-track-title: 0.05em;
  --crx-track-body: 0.03em;
  --crx-track-small: 0;

  /* Layout
     Desktop 1600 artboard: 80px side margin → 1440px content track */
  --crx-page: 1600px;
  --crx-margin: 80px;
  --crx-container: calc(var(--crx-page) - (var(--crx-margin) * 2)); /* 1440 */
  --crx-section-y: 100px;
  --crx-gutter: 20px;

  /* Radius */
  --crx-radius-btn: 30px;
  --crx-radius-hero: 40px;
  --crx-radius-pill: 1000px;
  --crx-radius-badge: 9px;

  /* Elevation / glass */
  --crx-blur-nav: 20px;
  --crx-blur-btn: 40px;
  --crx-blur-card: 60px;

  /* Motion */
  --crx-ease: 0.25s ease;
}

@media (max-width: 992px) {
  :root {
    --crx-fs-jumbo: 40px;
    --crx-fs-h1: 32px;
    --crx-fs-h2: 22px;
    --crx-fs-h3: 20px;
    --crx-fs-body: 16px;
    --crx-margin: 20px;
    --crx-section-y: 60px;
  }
}