:root {
  --surface-tint: #8a3d68;

  --primary: #8a3d68;
  --primary-dim: #6e2e52;
  --primary-container: #f3d4e4;
  --secondary: #99604a;
  --secondary-dim: #7c4c3a;
  --secondary-container: #efd9cc;
  --tertiary: #7c537f;
  --tertiary-dim: #634267;
  --tertiary-container: #e8d8ed;

  --on-primary: #fff7fb;
  --on-primary-container: #55233f;
  --on-secondary: #fff8f4;
  --on-secondary-container: #5c3628;
  --on-tertiary: #fff7ff;
  --on-tertiary-container: #4d3051;
  --inverse-primary: #efbfd4;

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(138, 61, 104, 0.14), rgba(110, 46, 82, 0.05));
}

body {
  background: linear-gradient(135deg, rgba(138, 61, 104, 0.08), rgba(214, 167, 190, 0.05)), var(--surface);
}

body::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.65), transparent 20%),
    radial-gradient(circle at 80% 0%, rgba(138, 61, 104, 0.08), transparent 28%),
    repeating-linear-gradient(0deg, rgba(45, 52, 51, 0.015) 0, rgba(45, 52, 51, 0.015) 1px, transparent 1px, transparent 5px);
}

::selection {
  background: rgba(138, 61, 104, 0.18);
  color: var(--on-surface);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-tint: #efbfd4;

    --primary: #efbfd4;
    --primary-dim: #cf90b0;
    --primary-container: #6f3353;
    --secondary: #f0c6b2;
    --secondary-dim: #d5a18c;
    --secondary-container: #6a3b2b;
    --tertiary: #dfc0e6;
    --tertiary-dim: #bd95c8;
    --tertiary-container: #65406a;

    --on-primary: #4d1836;
    --on-primary-container: #ffe7f1;
    --on-secondary: #4d2418;
    --on-secondary-container: #ffe9de;
    --on-tertiary: #48284d;
    --on-tertiary-container: #f8e6fc;
    --inverse-primary: #8a3d68;

    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
    --gradient-hero: linear-gradient(135deg, rgba(239, 191, 212, 0.16), rgba(207, 144, 176, 0.06));
  }
}

html.dark-mode {
  --surface-tint: #efbfd4;

  --primary: #efbfd4;
  --primary-dim: #cf90b0;
  --primary-container: #6f3353;
  --secondary: #f0c6b2;
  --secondary-dim: #d5a18c;
  --secondary-container: #6a3b2b;
  --tertiary: #dfc0e6;
  --tertiary-dim: #bd95c8;
  --tertiary-container: #65406a;

  --on-primary: #4d1836;
  --on-primary-container: #ffe7f1;
  --on-secondary: #4d2418;
  --on-secondary-container: #ffe9de;
  --on-tertiary: #48284d;
  --on-tertiary-container: #f8e6fc;
  --inverse-primary: #8a3d68;

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-dim));
  --gradient-hero: linear-gradient(135deg, rgba(239, 191, 212, 0.16), rgba(207, 144, 176, 0.06));
}

html.dark-mode body {
  background: linear-gradient(135deg, rgba(111, 51, 83, 0.26), rgba(101, 64, 106, 0.14)), var(--surface);
}