/* Direction: Shopfluence — social commerce. Lavender-white canvas, electric violet, warm coral, peach gradients, rounded cards */
/* 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: #f3edff;
  --border: #e6dcf7;
  --border-strong: #b4afbc;
  --ink: #1d1433;
  --muted: #5f5679;
  --accent: #6a2ee8;
  --accent-hover: #5a27c5;
  --accent-ink: #ffffff;
  --accent-text: #5b21d1;
  --accent-strong: #6a2ee8;
  --accent-soft: #eee6ff;
  --accent-border: #ba9df5;
  --success: #0f7a56;
  --success-ink: #ffffff;
  --success-soft: #dfe9eb;
  --success-strong: #0e704f;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e4e1;
  --warning-strong: #a64c08;
  --danger: #d12a3b;
  --danger-ink: #ffffff;
  --danger-soft: #f6dfe7;
  --danger-strong: #c02736;
  --chart-1: #6a2ee8;
  --chart-2: #d92496;
  --chart-3: #7d380a;
  --chart-4: #807e13;
  --chart-5: #005c44;
  --chart-6: #1888af;

  --x-coral: #d93a2c;
  --x-on-photo: #ffffff;
  --gradient-brand: linear-gradient(135deg, #d93a2c 0%, #b8338f 48%, #6a2ee8 100%);
  --gradient-peach: linear-gradient(135deg, #ffe7dc 0%, #f1e8ff 100%);
  --gradient-av0: linear-gradient(135deg, #d93a2c, #b8338f);
  --gradient-av1: linear-gradient(135deg, #6a2ee8, #3b5bdb);
  --gradient-av2: linear-gradient(135deg, #d93a2c, #b45309);
  --gradient-av3: linear-gradient(135deg, #7a35f0, #b0239f);
  --gradient-av4: linear-gradient(135deg, #0f6f86, #3b5bdb);
  --gradient-av5: linear-gradient(135deg, #b8338f, #6a2ee8);
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --radius-card: 20px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow-card: 0 8px 28px rgba(80, 40, 160, 0.08);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #080311;
  --surface: #211c29;
  --surface-2: #14101d;
  --border: #2b2632;
  --border-strong: #524f58;
  --ink: #fbf8ff;
  --muted: #9a96a0;
  --accent: #6a2ee8;
  --accent-hover: #804deb;
  --accent-ink: #ffffff;
  --accent-text: #9d75f0;
  --accent-strong: #9469ef;
  --accent-soft: #1e0c40;
  --accent-border: #341672;
  --success: #0f7a56;
  --success-ink: #ffffff;
  --success-soft: #0a1d20;
  --success-strong: #44987b;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2e150f;
  --warning-strong: #c57a40;
  --danger: #d12a3b;
  --danger-ink: #ffffff;
  --danger-soft: #340c1a;
  --danger-strong: #db5966;
  --chart-1: #7a47fd;
  --chart-2: #f52eaa;
  --chart-3: #c65e18;
  --chart-4: #93911d;
  --chart-5: #0c9673;
  --chart-6: #239bc7;
}

.bg-brand { background: var(--gradient-brand); }
.bg-peach { background: var(--gradient-peach); }
.text-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.av {
  display: grid;
  place-items: center;
  border-radius: 9999px;
  color: var(--x-on-photo);
  font-weight: 700;
  flex: none;
  letter-spacing: 0.02em;
}
.av-0 { background: var(--gradient-av0); }
.av-1 { background: var(--gradient-av1); }
.av-2 { background: var(--gradient-av2); }
.av-3 { background: var(--gradient-av3); }
.av-4 { background: var(--gradient-av4); }
.av-5 { background: var(--gradient-av5); }

.tile {
  @apply overflow-hidden rounded-[var(--radius-card)] border border-border bg-surface;
  box-shadow: var(--shadow-card);
}

.pill {
  @apply inline-flex shrink-0 items-center rounded-full border border-border bg-surface px-4 py-2 text-sm font-semibold text-ink transition hover:border-accent;
}
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill[aria-current="true"] {
  @apply border-accent bg-accent text-accent-ink;
}

.navlink {
  @apply flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-semibold text-muted transition hover:bg-accent-soft hover:text-ink;
}
.navlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.navlink[aria-current="page"] {
  @apply bg-accent-soft text-accent-text;
}

.lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.lift:hover { transform: translateY(-3px); }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.bar { transform-origin: bottom; animation: grow-y 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hbar { transform-origin: left; animation: grow-x 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes grow-y { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
@keyframes grow-x { from { transform: scaleX(0.1); } to { transform: scaleX(1); } }
html.reduced-motion .bar,
html.reduced-motion .hbar { animation: none; }
html.reduced-motion .lift:hover { transform: none; }