/* Direction: GlowNest — premium spa meets cheerful wellness studio. Lavender, aqua, coral, peach, mint, sunshine on white; dark plum text. */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fbf8ff;
  --surface: #ffffff;
  --surface-2: #f4edff;
  --border: #e6dbf6;
  --border-strong: #b5b0bc;
  --ink: #3b1646;
  --muted: #6b4f78;
  --accent: #7c3aed;
  --accent-hover: #6931c9;
  --accent-ink: #ffffff;
  --accent-text: #6d28d9;
  --accent-strong: #7c3aed;
  --accent-soft: #ece3ff;
  --accent-border: #c2a3f7;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfeae8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e4e1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f3dee4;
  --danger-strong: #b91c1c;
  --chart-1: #7c3aed;
  --chart-2: #ee2096;
  --chart-3: #894201;
  --chart-4: #858b1d;
  --chart-5: #0b6451;
  --chart-6: #0a92c6;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --radius-card: 24px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow-card: 0 14px 34px -16px rgba(124, 58, 237, 0.35);
  --x-plum: #3b1646;
  --x-error: #b42347;
  --x-on-active: #ffffff;
  --x-lav: #a78bfa;
  --x-aqua: #22c1d6;
  --x-coral: #ff6b8b;
  --x-peach: #ffa66b;
  --x-mint: #3ccf9a;
  --x-sun: #ffd23f;
  --x-lav-soft: #e6dcff;
  --x-aqua-soft: #c8f2f7;
  --x-coral-soft: #ffd8e2;
  --x-peach-soft: #ffe2d0;
  --x-mint-soft: #ccf5e3;
  --x-sun-soft: #fff0b3;
  --gradient-hero: linear-gradient(135deg, #cdbcff 0%, #aaeef5 48%, #ffd9c7 100%);
  --gradient-lav: linear-gradient(135deg, #dcd0ff, #bda8ff);
  --gradient-aqua: linear-gradient(135deg, #c8f2f7, #8fe3ee);
  --gradient-coral: linear-gradient(135deg, #ffd8e2, #ff9fb6);
  --gradient-peach: linear-gradient(135deg, #ffe6d6, #ffbf99);
  --gradient-mint: linear-gradient(135deg, #d3f7e8, #8fe6c4);
  --gradient-sun: linear-gradient(135deg, #fff3bd, #ffd96a);
  --gradient-active: linear-gradient(120deg, #6d28d9, #a8329a);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Nunito", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #0a0514;
  --surface: #231e2c;
  --surface-2: #161220;
  --border: #2c2835;
  --border-strong: #54505b;
  --ink: #fbf8ff;
  --muted: #9b97a1;
  --accent: #7c3aed;
  --accent-hover: #9058f0;
  --accent-ink: #ffffff;
  --accent-text: #a171f1;
  --accent-strong: #a171f1;
  --accent-soft: #231144;
  --accent-border: #3d1d76;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0c201d;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2f1612;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #310a16;
  --danger-strong: #d16969;
  --chart-1: #8242f4;
  --chart-2: #f62c9c;
  --chart-3: #c36208;
  --chart-4: #8b920f;
  --chart-5: #20957a;
  --chart-6: #1c98cd;
}

body { background-image: radial-gradient(circle at 100% 0%, var(--x-lav-soft), transparent 40%), radial-gradient(circle at 0% 100%, var(--x-aqua-soft), transparent 35%); background-attachment: fixed; }

.tint { color: var(--x-plum); }
.t-lav { background: var(--x-lav-soft); color: var(--x-plum); }
.t-aqua { background: var(--x-aqua-soft); color: var(--x-plum); }
.t-coral { background: var(--x-coral-soft); color: var(--x-plum); }
.t-peach { background: var(--x-peach-soft); color: var(--x-plum); }
.t-mint { background: var(--x-mint-soft); color: var(--x-plum); }
.t-sun { background: var(--x-sun-soft); color: var(--x-plum); }
.g-hero { background: var(--gradient-hero); color: var(--x-plum); }
.g-lav { background: var(--gradient-lav); color: var(--x-plum); }
.g-aqua { background: var(--gradient-aqua); color: var(--x-plum); }
.g-coral { background: var(--gradient-coral); color: var(--x-plum); }
.g-peach { background: var(--gradient-peach); color: var(--x-plum); }
.g-mint { background: var(--gradient-mint); color: var(--x-plum); }
.g-sun { background: var(--gradient-sun); color: var(--x-plum); }
.f-lav { background: var(--x-lav); }
.f-aqua { background: var(--x-aqua); }
.f-coral { background: var(--x-coral); }
.f-peach { background: var(--x-peach); }
.f-mint { background: var(--x-mint); }
.f-sun { background: var(--x-sun); }

.pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .7rem; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: currentColor; opacity: .55; }

.field-error { color: var(--x-error); font-size: .8rem; font-weight: 700; margin-top: .25rem; }
.scrim { background: color-mix(in srgb, var(--x-plum) 45%, transparent); }

.nav a { display: flex; align-items: center; gap: .75rem; border-radius: 1rem; padding: .6rem .8rem; font-size: .92rem; font-weight: 700; transition: background .15s, transform .15s; }
.nav a:hover { background: var(--accent-soft); transform: translateX(2px); }
.nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav a:nth-child(6n+1) .icon { color: var(--x-lav); }
.nav a:nth-child(6n+2) .icon { color: var(--x-aqua); }
.nav a:nth-child(6n+3) .icon { color: var(--x-coral); }
.nav a:nth-child(6n+4) .icon { color: var(--x-peach); }
.nav a:nth-child(6n+5) .icon { color: var(--x-mint); }
.nav a:nth-child(6n) .icon { color: var(--x-sun); }
.nav a[aria-current="page"] { background: var(--gradient-active); color: var(--x-on-active); box-shadow: var(--shadow-card); }
.nav a[aria-current="page"] .icon { color: var(--x-on-active); }

.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tbl th { text-align: left; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: .6rem .75rem; white-space: nowrap; }
.tbl td { padding: .75rem; border-top: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface-2); }

.lift { transition: transform .2s, box-shadow .2s; }
.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.blob { position: absolute; border-radius: 9999px; filter: blur(48px); opacity: .6; pointer-events: none; }
@keyframes floaty { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-14px) rotate(6deg); } }
.floaty { animation: floaty 5s ease-in-out infinite alternate; }
html.reduced-motion .floaty { animation: none; }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.cal-day { display: block; min-height: 4.2rem; border-radius: .9rem; padding: .35rem; background: var(--surface-2); font-size: .75rem; transition: transform .15s, box-shadow .15s; }
.cal-day:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.cal-day.is-today { outline: 2px solid var(--accent); }
.cal-day.is-sel { background: var(--x-lav-soft); }
.cal-day.is-blank { background: transparent; pointer-events: none; }
.cal-chip { display: block; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: .5rem; padding: .05rem .3rem; font-size: .68rem; font-weight: 700; color: var(--x-plum); }

.donut { display: grid; place-items: center; border-radius: 9999px; width: 9.5rem; height: 9.5rem; flex: none; }
.donut > div { display: grid; place-items: center; width: 6.2rem; height: 6.2rem; border-radius: 9999px; background: var(--surface); text-align: center; }
.track { height: .75rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.track > span { display: block; height: 100%; border-radius: 999px; }
.dot-unread { width: .7rem; height: .7rem; border-radius: 999px; background: var(--x-coral); flex: none; }
dialog.modal::backdrop { background: color-mix(in srgb, var(--x-plum) 50%, transparent); }