/*
 * theme.css — GlamVault design tokens.
 * Glass-luxe × organic-earthy: deep plum ground, rich-plum surfaces, a
 * champagne hairline, one dusty-rose accent. Opens dark; a light set is
 * provided for the switch.
 */

:root {
  color-scheme: dark;

  --canvas: #21151f;
  --surface: #372c35;
  --surface-2: #463047;
  --border: #50374d;
  --border-strong: #70495f;
  --ink: #f7efe9;
  --muted: #ac9f9f;

  --accent: #b86f88;
  --accent-hover: #c37f96;
  --accent-ink: #221f1f;
  --accent-text: #d39aae;
  --accent-strong: #cc99aa;
  --accent-soft: #4c3543;
  --accent-border: #7a4d61;

  --success: #6fae72;
  --success-ink: #16210f;
  --success-soft: #263a20;
  --success-strong: #93cf8f;

  --warning: #cf9a4c;
  --warning-ink: #241505;
  --warning-soft: #3c2c16;
  --warning-strong: #e2b877;

  --danger: #b1616a;
  --danger-ink: #0d0607;
  --danger-soft: #3c2024;
  --danger-strong: #db949a;

  --chart-1: #b86f88;
  --chart-2: #c8a875;
  --chart-3: #7fae7c;
  --chart-4: #b97a5a;
  --chart-5: #8a7ab8;
  --chart-6: #d9c9a3;

  /* GlamVault's own token — the champagne hairline used across the sidebar
     and metric cards. --x-<name> is the one way to add a token here. */
  --x-champagne: #c8a875;
  --x-glow: color-mix(in srgb, var(--accent) 32%, transparent);
  --x-sidebar: #2c1b2a;
  --x-sidebar-ink: #f0e4e8;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.08em;

  --radius-card: 20px;
  --radius-btn: 14px;
  --radius-input: 12px;
  --radius-lg: 16px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0.04em;
  --btn-weight: 600;
  --measure: 68ch;

  --shadow-card: 0 10px 28px -12px color-mix(in srgb, var(--ink) 55%, transparent), 0 2px 8px color-mix(in srgb, var(--ink) 28%, transparent);
  --shadow-raised: 0 28px 60px -18px color-mix(in srgb, var(--ink) 62%, transparent), 0 10px 26px color-mix(in srgb, var(--ink) 34%, transparent);
  --shadow-btn: 0 1px 3px color-mix(in srgb, var(--ink) 35%, transparent);
}

html[data-theme="light"] {
  color-scheme: light;

  --canvas: #f8f0ea;
  --surface: #fdf8f5;
  --surface-2: #f2e2e6;
  --border: #e4cdd2;
  --border-strong: #cba8ae;
  --ink: #2a1620;
  --muted: #756268;

  --accent: #a85d78;
  --accent-hover: #96506a;
  --accent-ink: #fdf8f5;
  --accent-text: #93435f;
  --accent-strong: #7a3550;
  --accent-soft: #f3dee3;
  --accent-border: #d9a9b6;

  --success: #4f8f56;
  --success-ink: #fbfff9;
  --success-soft: #e3f0e1;
  --success-strong: #3c6f41;

  --warning: #a97a2c;
  --warning-ink: #fffaf0;
  --warning-soft: #f5e8d0;
  --warning-strong: #855e1e;

  --danger: #a24851;
  --danger-ink: #fff5f5;
  --danger-soft: #f5dfe1;
  --danger-strong: #7f333b;

  --chart-1: #a85d78;
  --chart-2: #a8823f;
  --chart-3: #4f8f56;
  --chart-4: #a85f3f;
  --chart-5: #6a5a96;
  --chart-6: #b39b6b;

  --x-champagne: #a8823f;
  --x-glow: color-mix(in srgb, var(--accent) 18%, transparent);
  --x-sidebar: #3a2534;
  --x-sidebar-ink: #f8eff1;
}

/*
 * app.css — GlamVault's own screens: the side-rail workspace shell, the
 * auth card ground, and the one motion the brief calls for (the dashboard's
 * metric grid staggering in). Everything else is primitives + utilities.
 */

@keyframes gv-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

html.reduced-motion .stagger-grid > * { animation: none !important; opacity: 1 !important; transform: none !important; }

/* The ground: a hushed plum-to-mauve wash, never flat black. */
body {
  background-color: var(--canvas);
  background-image:
    radial-gradient(70rem 40rem at 100% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(60rem 40rem at -10% 100%, color-mix(in srgb, var(--x-champagne) 10%, transparent), transparent 55%);
  background-attachment: fixed;
}

/* ---- App shell ------------------------------------------------------- */

.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.navopen { position: absolute; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background: color-mix(in srgb, black 55%, transparent);
}
#nav:checked ~ .nav-scrim { display: block; }

.sidebar {
  position: fixed;
  inset-block: 0;
  left: 0;
  z-index: 50;
  display: flex;
  width: 17rem;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
  background: var(--x-sidebar);
  color: var(--x-sidebar-ink);
  border-right: 1px solid color-mix(in srgb, var(--x-champagne) 22%, transparent);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 0s linear 220ms;
}
#nav:checked ~ .sidebar { transform: translateX(0); visibility: visible; transition: transform 220ms ease, visibility 0s linear 0s; }

.brand { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0.5rem 0.75rem; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--x-champagne);
  border: 1px solid color-mix(in srgb, var(--x-champagne) 45%, transparent);
}
.brand-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.15rem; letter-spacing: -0.01em; color: var(--x-sidebar-ink); }

.nav-groups { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; }
.nav-group { display: flex; flex-direction: column; gap: 0.15rem; }
.nav-group + .nav-group { padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--x-champagne) 20%, transparent); }
.nav-group-label {
  padding: 0.4rem 0.75rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  color: color-mix(in srgb, var(--x-sidebar-ink) 55%, transparent);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--x-sidebar-ink) 82%, transparent);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-item:hover { background: color-mix(in srgb, var(--x-sidebar-ink) 8%, transparent); color: var(--x-sidebar-ink); text-decoration: none; }
.nav-item.is-active {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--x-sidebar-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.nav-item-logout { background: none; border: none; cursor: pointer; text-align: left; font: inherit; }

.sidebar-foot { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.75rem; border-top: 1px solid color-mix(in srgb, var(--x-champagne) 20%, transparent); }
.sidebar-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.5rem 0.1rem; }
/* The sidebar keeps its own dark ground in both app themes, so its text
   reads off the sidebar's own ink token — never the page's text-ink/
   text-muted, which flip to a DARK colour in light mode and vanish here. */
.sidebar-user-name { color: var(--x-sidebar-ink); }
.sidebar-user-email { color: color-mix(in srgb, var(--x-sidebar-ink) 75%, transparent); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 64rem) {
  .app-main { margin-left: 17rem; }
  .sidebar { transform: translateX(0); visibility: visible; }
  .nav-scrim { display: none !important; }
}

.app-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--x-champagne) 20%, var(--border));
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav-toggle { display: inline-flex; }
@media (min-width: 64rem) { .nav-toggle { display: none; } }
.app-topbar-title { font-size: 1.05rem; font-weight: 600; }

.app-content { padding: 1.5rem; max-width: 90rem; width: 100%; margin-inline: auto; }
@media (min-width: 48rem) { .app-content { padding: 2rem 2.5rem; } }

/* ---- Motion: the dashboard's metric grid stagger, and nothing else. --- */
.stagger-grid > * {
  animation: gv-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-play-state: paused;
}
.stagger-grid.is-armed > *:nth-child(1) { animation-delay: 0ms; }
.stagger-grid.is-armed > *:nth-child(2) { animation-delay: 60ms; }
.stagger-grid.is-armed > *:nth-child(3) { animation-delay: 120ms; }
.stagger-grid.is-armed > *:nth-child(4) { animation-delay: 180ms; }
.stagger-grid.is-armed > *:nth-child(5) { animation-delay: 240ms; }
.stagger-grid.is-armed > *:nth-child(6) { animation-delay: 300ms; }
.stagger-grid.is-armed > * { animation-play-state: running; }

/* ---- Auth pages -------------------------------------------------------- */
.auth-ground {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}
.auth-card-wrap { width: min(26rem, 100%); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin-bottom: 1.75rem; }
.auth-brand .brand-mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--x-champagne);
  border: 1px solid color-mix(in srgb, var(--x-champagne) 45%, transparent);
}
.auth-brand .brand-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3rem; letter-spacing: -0.01em; }

/* ---- Small shared bits -------------------------------------------------- */
.metric-figure { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.9rem; letter-spacing: var(--display-tracking); line-height: 1.1; }
.champagne-rule { height: 1px; background: color-mix(in srgb, var(--x-champagne) 35%, transparent); border: none; }
.category-icon-tile {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  flex-shrink: 0;
}