/* ✨ museshift affine theme ✨
   lisa frank on acid meets 90s grunge meets chrome meets the mall in 1997
   warm maximalism. cute with teeth. chaos that holds. */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ═══ DARK MODE (default museshift energy) ═══ */
:root {
  --affine-brand-color: #ce93d8 !important;
  --affine-primary-color: #ce93d8 !important;
  --affine-hover-color: rgba(206, 147, 216, 0.15) !important;
  --affine-hover-color-filled: #7b1fa2 !important;
  --affine-background-primary-color: #0a0a0a !important;
  --affine-background-secondary-color: #1a1a2e !important;
  --affine-background-tertiary-color: #12121f !important;
  --affine-background-overlay-panel-color: #1a1a2e !important;
  --affine-border-color: #2a2a3e !important;
  --affine-divider-color: #2a2a3e !important;
  --affine-text-primary-color: #e0e0e0 !important;
  --affine-text-secondary-color: #9e9e9e !important;
  --affine-icon-color: #B57EDC !important;
  --affine-link-color: #CCFF00 !important;
  --affine-success-color: #69f0ae !important;
  --affine-error-color: #ff5252 !important;
  --affine-warning-color: #ffee58 !important;
}

/* ═══ LIGHT MODE (cream/lavender kawaii base) ═══ */
[data-theme="light"] {
  --affine-brand-color: #7b1fa2 !important;
  --affine-primary-color: #7b1fa2 !important;
  --affine-hover-color: rgba(181, 126, 220, 0.12) !important;
  --affine-hover-color-filled: #ce93d8 !important;
  --affine-background-primary-color: #FFF5F8 !important;
  --affine-background-secondary-color: #E6E6FA !important;
  --affine-background-tertiary-color: #F5FFFA !important;
  --affine-background-overlay-panel-color: #FFFDD0 !important;
  --affine-border-color: #C8A2C8 !important;
  --affine-divider-color: #E6E6FA !important;
  --affine-text-primary-color: #1a1a2e !important;
  --affine-text-secondary-color: #5a5a6e !important;
  --affine-icon-color: #7b1fa2 !important;
  --affine-link-color: #7b1fa2 !important;
}

/* ═══ FONT — chunky rounded, not corporate ═══ */
body, * {
  font-family: 'Nunito', -apple-system, sans-serif !important;
}

/* lowercase headers — never title case */
h1, h2, h3, h4, h5, h6,
[class*="title"], [class*="Title"],
[class*="header"], [class*="Header"] {
  text-transform: lowercase !important;
  font-weight: 800 !important;
}

/* ═══ KAWAII STRUCTURAL LAYER — rounded everything 20px+ ═══ */
button, [class*="button"], [class*="Button"],
input, textarea, select {
  border-radius: 20px !important;
}

[class*="card"], [class*="Card"],
[class*="modal"], [class*="Modal"],
[class*="dialog"], [class*="Dialog"],
[class*="panel"], [class*="Panel"],
[class*="menu"], [class*="Menu"],
[class*="popover"], [class*="Popover"],
[class*="dropdown"], [class*="Dropdown"],
[class*="tooltip"], [class*="Tooltip"] {
  border-radius: 16px !important;
}

/* pill buttons — soft, touchable, candy-like */
button, [role="button"] {
  border-radius: 20px !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

button:hover, [role="button"]:hover {
  transform: scale(1.02) !important;
}

/* ═══ SIDEBAR — secondary surface ═══ */
[class*="sidebar"], [class*="Sidebar"],
[data-testid="app-sidebar"] {
  background: var(--affine-background-secondary-color) !important;
}

/* ═══ SOFT SHADOWS — floating, depth without harshness ═══ */
[class*="popover"], [class*="modal"],
[class*="dropdown"], [class*="menu"],
[class*="Menu"], [class*="Popover"],
[class*="Dialog"], [class*="Modal"] {
  box-shadow: 0 8px 32px rgba(123, 31, 162, 0.2) !important;
}

[data-theme="light"] [class*="popover"],
[data-theme="light"] [class*="modal"],
[data-theme="light"] [class*="dropdown"] {
  box-shadow: 0 8px 32px rgba(181, 126, 220, 0.15) !important;
}

/* ═══ SCROLLBAR — lavender + chrome ═══ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #B57EDC, #ce93d8, #C0C0C0);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #7b1fa2, #B57EDC, #C0C0C0);
}

/* ═══ SELECTION — electric lime on purple ═══ */
::selection {
  background: rgba(204, 255, 0, 0.3) !important;
  color: inherit !important;
}

/* ═══ TAG/LABEL PILLS ═══ */
[class*="tag"], [class*="Tag"],
[class*="label"], [class*="Label"],
[class*="chip"], [class*="Chip"] {
  border-radius: 20px !important;
  font-weight: 700 !important;
}

/* ═══ LINKS — electric lime in dark, deep purple in light ═══ */
a {
  transition: color 0.15s ease !important;
}

/* ═══ GLOW ON FOCUS — saturated color + blur = alive ═══ */
input:focus, textarea:focus, select:focus,
[class*="input"]:focus-within {
  box-shadow: 0 0 0 2px rgba(181, 126, 220, 0.4) !important;
  border-color: #B57EDC !important;
}

/* ═══ TRANSITIONS — bounce, not static ═══ */
button, a, [class*="item"], [class*="Item"],
[class*="nav"], [class*="Nav"],
[class*="tab"], [class*="Tab"] {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ═══ BRAND ACCENT — chrome/silver neutral ═══ */
[class*="divider"], [class*="Divider"],
hr {
  border-color: #C0C0C0 !important;
  opacity: 0.3 !important;
}