:root {
  /* Brand */
  --brand-primary: #EB028E;
  --brand-primary-hover: #C10272;
  --brand-primary-pressed: #9F015E;
  --brand-primary-dark: #7C0049;
  --brand-primary-soft: #FDE7EF;
  --brand-primary-pale: #FFF2F7;
  --brand-primary-ghost: rgba(235, 2, 142, 0.08);
  --brand-primary-focus: rgba(235, 2, 142, 0.28);

  /* Energy light */
  --brand-gold: #F2B63F;
  --brand-amber: #F39A45;
  --brand-coral-light: #FF6F79;
  --brand-gold-soft: #FFF4D7;
  --brand-amber-soft: #FFF0E4;

  /* Surfaces */
  --surface-page: #F5F1EB;
  --surface-primary: #FFFFFF;
  --surface-secondary: #E9E5DD;
  --surface-tertiary: #F1E9ED;
  --surface-highlight: #FFF8FB;
  --surface-inverse: #292328;
  --surface-overlay: rgba(41, 35, 40, 0.46);

  /* Text */
  --text-primary: #292328;
  --text-secondary: #6E646A;
  --text-tertiary: #91868C;
  --text-disabled: #B7ADB2;
  --text-inverse: #FFFFFF;
  --text-link: #EB028E;

  /* Borders */
  --border-subtle: #EEE5EA;
  --border-default: #E2D8DE;
  --border-strong: #CDBFC6;
  --border-focus: #EB028E;

  /* Semantic */
  --success: #23865E;
  --success-bg: #E8F6F0;
  --warning: #B56A16;
  --warning-bg: #FFF3E1;
  --danger: #C4374D;
  --danger-bg: #FDEBED;
  --info: #386F9E;
  --info-bg: #EAF3FA;
  --neutral-status: #625A5F;
  --neutral-status-bg: #F0EBEE;

  /* Sidebar */
  --sidebar-bg: #E9E5DD;
  --sidebar-border: #EEE5EA;
  --sidebar-text: #62585E;
  --sidebar-icon: #776D72;
  --sidebar-active-bg: #FFF0F5;
  --sidebar-active-text: #EB028E;
  --sidebar-active-indicator: #EB028E;

  /* Typography */
  --font-ui: "Onest", "Inter", "Segoe UI", Arial, sans-serif;
  --font-display: var(--font-ui);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(41, 35, 40, 0.04);
  --shadow-sm: 0 2px 8px rgba(41, 35, 40, 0.05), 0 10px 28px rgba(41, 35, 40, 0.035);
  --shadow-md: 0 8px 24px rgba(41, 35, 40, 0.08), 0 22px 56px rgba(41, 35, 40, 0.06);
  --shadow-overlay: 0 20px 64px rgba(41, 35, 40, 0.16);

  /* Motion */
  --motion-fast: 120ms;
  --motion-standard: 180ms;
  --motion-slow: 260ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);

  /* Gradients */
  --gradient-energy: linear-gradient(110deg, #EB028E 0%, #FF5B73 46%, #F39A45 72%, #F2B63F 100%);
  --gradient-energy-soft: linear-gradient(120deg, rgba(235, 2, 142, 0.10) 0%, rgba(255, 111, 121, 0.07) 45%, rgba(242, 182, 63, 0.09) 100%);
}

/* Core reusable examples — adapt to the project's component system. */
body {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.button-primary {
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--brand-primary);
  border-radius: 12px;
  background: var(--brand-primary);
  color: var(--text-inverse);
  font: 600 14px/1 var(--font-ui);
  transition:
    background-color var(--motion-standard) var(--motion-easing),
    border-color var(--motion-standard) var(--motion-easing),
    box-shadow var(--motion-standard) var(--motion-easing),
    transform var(--motion-fast) var(--motion-easing);
}

.button-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.button-primary:active { background: var(--brand-primary-pressed); border-color: var(--brand-primary-pressed); }
.button-primary:focus-visible { box-shadow: 0 0 0 4px var(--brand-primary-focus); }

.card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  box-shadow: var(--shadow-xs);
}