/* Purple Theme */
html[data-color="purple"]{ --brand-h:270; }

/* Typography - Basis Fonts */
html[data-color="purple"] {
  font-family: var(--font-basis-primary);
}
html[data-color="purple"] .muted,
html[data-color="purple"] .help,
html[data-color="purple"] .label {
  font-family: var(--font-basis-secondary);
}

html[data-theme="light"][data-color="purple"]{
  --bg: #faf4ff;
  --card: #ffffff;
  --text: #1f0f2d;
  --muted: #7a5a8a;
  --line: #e6d6ff;
  --surface-2: #f2ecff;
  --surface-3: #e9ddff;
}

html[data-theme="dark"][data-color="purple"]{
  --bg: #14081f;
  --card: #1c0c29;
  --text: #e8d6ff;
  --muted: #b88ad6;
  --line: #2e1b44;
  --surface-2: #211132;
  --surface-3: #2a1540;
  --brand: #A855F7;
  --brand-2: #C084FC;
  --brand-3: #D8B4FE;
  --brand-4: #E9D5FF;
}

/* Background */
html[data-color="purple"] body {
  background: 
    linear-gradient(135deg, 
      rgba(250, 244, 255, 0.92) 0%, 
      rgba(233, 221, 255, 0.88) 50%, 
      rgba(250, 244, 255, 0.92) 100%
    ),
    url('../backrounds/purple-crystals-backround.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

html[data-theme="dark"][data-color="purple"] body {
  background: 
    linear-gradient(135deg, 
      rgba(20, 8, 31, 0.9) 0%, 
      rgba(28, 12, 41, 0.85) 50%,
      rgba(20, 8, 31, 0.9) 100%
    ),
    url('../backrounds/purple-crystals-backround.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}