/* Direction: ShopVibe — playful retail pop. Lavender-white paper, navy ink, electric purple buttons, coral / blue / yellow / mint accents */
/* 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: #f6f3ff;
  --surface: #ffffff;
  --surface-2: #eae7f4;
  --border: #e3def5;
  --border-strong: #b1acbc;
  --ink: #14193b;
  --muted: #566086;
  --accent: #6d28d9;
  --accent-hover: #5d22b8;
  --accent-ink: #ffffff;
  --accent-text: #6027c4;
  --accent-strong: #6d28d9;
  --accent-soft: #e3d7fa;
  --accent-border: #b898ee;
  --success: #0f9d6b;
  --success-ink: #14193b;
  --success-soft: #dae9ed;
  --success-strong: #0b6f4c;
  --warning: #b7791f;
  --warning-ink: #14193b;
  --warning-soft: #eee4e4;
  --warning-strong: #845617;
  --danger: #e0364f;
  --danger-ink: #ffffff;
  --danger-soft: #f3dcea;
  --danger-strong: #af2a3e;
  --chart-1: #6d28d9;
  --chart-2: #d32287;
  --chart-3: #783904;
  --chart-4: #767b03;
  --chart-5: #105a49;
  --chart-6: #0f82af;

  --font-display: "Fredoka", "Trebuchet MS", sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 600;
  --radius-card: 20px;
  --radius-btn: 14px;
  --radius-input: 12px;
  --shadow-card: 0 6px 22px rgba(60, 30, 140, 0.09);
  --x-coral: #ff5d73;
  --x-purple: #7c3aed;
  --x-blue: #2563eb;
  --x-yellow: #f5b50a;
  --x-mint: #12b886;
  --x-on-photo: #ffffff;
  --gradient-brand: linear-gradient(135deg, #ff5d73 0%, #7c3aed 55%, #2563eb 100%);
  --gradient-sun: linear-gradient(135deg, #f5b50a 0%, #ff5d73 100%);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #080310;
  --surface: #211c28;
  --surface-2: #14101c;
  --border: #2b2631;
  --border-strong: #524f58;
  --ink: #f6f3ff;
  --muted: #97939f;
  --accent: #6d28d9;
  --accent-hover: #8348df;
  --accent-ink: #ffffff;
  --accent-text: #9f71e6;
  --accent-strong: #9765e4;
  --accent-soft: #1e0b3c;
  --accent-border: #35146a;
  --success: #0f9d6b;
  --success-ink: #ffffff;
  --success-soft: #0a2524;
  --success-strong: #0f9d6b;
  --warning: #b7791f;
  --warning-ink: #ffffff;
  --warning-soft: #2f1d13;
  --warning-strong: #bd8431;
  --danger: #e0364f;
  --danger-ink: #ffffff;
  --danger-soft: #380e1e;
  --danger-strong: #e4556a;
  --chart-1: #7d41ee;
  --chart-2: #ef2d9a;
  --chart-3: #c26214;
  --chart-4: #888e0e;
  --chart-5: #0c9679;
  --chart-6: #1a95c7;
}

.tone-coral { --tone: var(--x-coral); }
.tone-purple { --tone: var(--x-purple); }
.tone-blue { --tone: var(--x-blue); }
.tone-yellow { --tone: var(--x-yellow); }
.tone-mint { --tone: var(--x-mint); }

.tone-chip {
  background: color-mix(in srgb, var(--tone, var(--x-purple)) 18%, var(--surface));
  color: color-mix(in srgb, var(--tone, var(--x-purple)) 55%, var(--ink));
}
.tone-card {
  background: color-mix(in srgb, var(--tone, var(--x-purple)) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tone, var(--x-purple)) 30%, var(--border));
}
.tone-bar { background: var(--tone, var(--x-purple)); }
.tone-solid { background: var(--tone, var(--x-purple)); color: var(--x-on-photo); }

.bg-brand { background: var(--gradient-brand); color: var(--x-on-photo); }
.bg-sun { background: var(--gradient-sun); color: var(--x-on-photo); }

/* sidebar */
.sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
.nav-open .sidebar { transform: none; }
@media (min-width: 1024px) { .sidebar { transform: none; } }
.scrim { display: none; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.5); }
.nav-open .scrim { display: block; }
@media (min-width: 1024px) { .nav-open .scrim { display: none; } }

.nav-link {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.4rem 0.6rem; border-radius: 14px; font-weight: 500; color: var(--ink);
  transition: background 0.15s ease, transform 0.15s ease; text-align: left;
}
.nav-link:hover { background: color-mix(in srgb, var(--x-purple) 10%, transparent); }
.nav-link:active { transform: scale(0.98); }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-link[aria-current="page"] { background: var(--accent); color: var(--x-on-photo); font-weight: 600; }
.nav-link[aria-current="page"] .nav-ico { background: color-mix(in srgb, var(--x-on-photo) 24%, transparent); color: var(--x-on-photo); }
.nav-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; flex: none; }

/* product cards */
.pcard { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 14px 34px color-mix(in srgb, var(--x-purple) 22%, transparent); }
.ph {
  display: grid; place-items: center; height: 100%; width: 100%; font-size: 2.6rem;
  background: var(--gradient-brand); color: var(--x-on-photo);
}
.stat-card { position: relative; overflow: hidden; }
.stat-card::after {
  content: ""; position: absolute; right: -28px; top: -28px; width: 90px; height: 90px; border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 16%, transparent); pointer-events: none;
}
.price-now { font-family: var(--font-display); font-weight: 600; }
.stars { color: var(--x-yellow); letter-spacing: 0.08em; }
.dot-unread { width: 10px; height: 10px; border-radius: 999px; background: var(--x-coral); display: inline-block; }

.hero-float { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
html.reduced-motion .hero-float { animation: none; }

.seg { display: inline-flex; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.8rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); font-weight: 500; font-size: 0.9rem;
}
.seg label:first-of-type { border-radius: 12px 0 0 12px; }
.seg label:last-of-type { border-radius: 0 12px 12px 0; }
.seg input:checked + label { background: var(--accent); color: var(--x-on-photo); border-color: var(--accent); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

dialog.modal { max-height: 92vh; overflow: auto; }