:root {
  
  --primary: #5a4ad1;
  --primary-deep: #34257f;
  --primary-soft: #efecfd;
  --ember: #d9742c;
  --ember-soft: #fdf1e6;
  --success: #2f8f6b;
  --danger: #c2413d;

  
  --surface-base: #ffffff;
  --surface-raised: #f7f5fe;
  --surface-deep: #211a48;
  --surface-overlay: rgba(23, 16, 55, 0.62);

  
  --ink-strong: #241d3f;
  --ink-body: #40396a;
  --ink-muted: #6b6490;
  --ink-inverse: #ffffff;
  --ink-inverse-muted: #cfc8ef;

  
  --action-primary: #5a4ad1;
  --action-hover: #4536b4;
  --action-disabled: #a9a3c6;

  
  --line-soft: #e7e2f6;
  --line-strong: #cdc4ec;
  --shadow-low: 0 0.25rem 0.875rem rgba(34, 23, 80, 0.08);
  --shadow-mid: 0 1rem 2.25rem rgba(34, 23, 80, 0.14);

  
  --radius-card: 14px;
  --radius-button: 10px;
  --radius-pill: 999px;

  
  --gap-3xs: 0.25rem;
  --gap-2xs: 0.5rem;
  --gap-xs: 0.75rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2rem;
  --gap-xl: 3rem;
  --gap-2xl: 4rem;
  --gap-3xl: 5rem;

  
  --font-display: 'Quicksand', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', sans-serif;

  
  --tap: 0.2s ease;

  
  --opener-photo: linear-gradient(145deg, #2c1f66 0%, #5a4ad1 48%, #9b7fd6 100%);
  --opener-photo-opacity: 1;
  --opener-veil: rgba(23, 16, 55, 0.62);

  
  --rail-width: 20rem;
  --wrap-width: 75rem;
  --sticky-height: 4.75rem;
}