/* ================================================================
   CartWise — Design tokens + base components
   Direction B: calm companion · Apple Health × Asana yoga
   Cool slate stone · muted cobalt accent · sparse confidence
   ================================================================ */

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

:root {
  /* Brand / accent — muted cobalt (≤10–15% of surface) */
  --cw-primary: oklch(0.52 0.12 255);
  --cw-primary-hover: oklch(0.45 0.13 255);
  --cw-primary-light: oklch(0.52 0.12 255 / 0.10);
  --cw-primary-wash: oklch(0.52 0.12 255 / 0.08);
  --cw-primary-ink: oklch(0.99 0.01 255);

  /* Soft amber for savings moments only (not brand) */
  --cw-accent: oklch(0.72 0.12 65);
  --cw-accent-hover: oklch(0.65 0.13 65);
  --cw-accent-light: oklch(0.72 0.12 65 / 0.14);

  /* Cool slate-stone neutrals (tint toward cobalt) */
  --cw-ink: oklch(0.28 0.025 260);
  --cw-bg: oklch(0.975 0.008 255);
  --cw-surface: oklch(0.995 0.004 255);
  --cw-border: oklch(0.88 0.012 255);
  --cw-border-subtle: oklch(0.28 0.025 260 / 0.07);
  --cw-link: var(--cw-primary);
  --cw-link-hover: var(--cw-primary-hover);

  --cw-n0: oklch(0.995 0.004 255);
  --cw-n50: oklch(0.975 0.008 255);
  --cw-n100: oklch(0.95 0.01 255);
  --cw-n200: oklch(0.90 0.012 255);
  --cw-n300: oklch(0.80 0.015 255);
  --cw-n500: oklch(0.52 0.02 260);
  --cw-n700: oklch(0.38 0.025 260);
  --cw-n900: oklch(0.28 0.025 260);

  /* Semantic — quiet, not brand green */
  --cw-success: oklch(0.52 0.10 165);
  --cw-success-soft: oklch(0.62 0.08 165);
  --cw-warn: oklch(0.72 0.12 65);
  --cw-error: oklch(0.58 0.16 25);
  --cw-info: var(--cw-primary);
  --cw-success-bg: oklch(0.52 0.10 165 / 0.10);
  --cw-error-bg: oklch(0.58 0.16 25 / 0.09);
  --cw-warn-bg: oklch(0.72 0.12 65 / 0.12);
  --cw-info-bg: var(--cw-primary-light);
  --cw-drop-bg: oklch(0.52 0.10 165 / 0.12);

  /* Depth — soft, not heavy */
  --cw-shadow: 0 1px 2px oklch(0.28 0.025 260 / 0.04), 0 8px 28px oklch(0.28 0.025 260 / 0.05);
  --cw-shadow-hover: 0 2px 6px oklch(0.28 0.025 260 / 0.05), 0 14px 36px oklch(0.28 0.025 260 / 0.07);
  --cw-shadow-lifted: 0 4px 12px oklch(0.28 0.025 260 / 0.06), 0 20px 48px oklch(0.28 0.025 260 / 0.08);
  --cw-shadow-search: 0 12px 40px oklch(0.28 0.025 260 / 0.07);

  /* Shape — soft, calm */
  --cw-radius-card: 20px;
  --cw-radius-input: 14px;
  --cw-radius-pill: 999px;
  --cw-radius-badge: 8px;
  --cw-radius-search: 18px;

  /* Motion */
  --cw-ease: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --cw-ease-slow: 280ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Type — one calm family */
  --cw-font-heading: "Figtree", system-ui, -apple-system, sans-serif;
  --cw-font-body: "Figtree", system-ui, -apple-system, sans-serif;
  --cw-tabular: "tnum" 1;

  /* Legacy aliases */
  --primary: var(--cw-ink);
  --text: var(--cw-ink);
  --text-secondary: var(--cw-n700);
  --text-muted: var(--cw-n500);
  --bg: var(--cw-bg);
  --bg-elevated: var(--cw-n100);
  --card: var(--cw-surface);
  --border: var(--cw-border);
  --border-subtle: var(--cw-border-subtle);
  --link: var(--cw-link);
  --link-hover: var(--cw-link-hover);
  --accent: var(--cw-primary);
  --accent-hover: var(--cw-primary-hover);
  --accent-muted: var(--cw-primary-light);
  --success: var(--cw-success);
  --success-bg: var(--cw-success-bg);
  --warn: var(--cw-warn);
  --warn-bg: var(--cw-warn-bg);
  --error: var(--cw-error);
  --error-bg: var(--cw-error-bg);
  --radius-card: var(--cw-radius-card);
  --radius-input: var(--cw-radius-input);
  --radius-btn: var(--cw-radius-pill);
  --radius-pill: var(--cw-radius-pill);
  --shadow-soft: var(--cw-shadow);
  --shadow-card: var(--cw-shadow);
  --shadow-card-hover: var(--cw-shadow-hover);
  --max-width: 1040px;
  --home-max: min(1080px, 100%);
  --font-sans: var(--cw-font-body);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body.cw-app,
body.page-home,
body.page-search,
body.page-basket,
body.page-auth,
body.page-product,
body.page-account {
  font-family: var(--cw-font-body);
  background:
    radial-gradient(900px 560px at 7% -12%, oklch(0.52 0.12 255 / 0.095), transparent 62%),
    radial-gradient(760px 460px at 92% 2%, oklch(0.72 0.12 65 / 0.075), transparent 58%),
    radial-gradient(620px 420px at 55% 110%, oklch(0.52 0.10 165 / 0.065), transparent 62%),
    linear-gradient(180deg, oklch(0.992 0.006 255), var(--cw-bg) 44%, oklch(0.965 0.01 255));
  background-attachment: fixed;
  color: var(--cw-ink);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cw-price,
.price,
.retailer-total,
.cheapest-basket-list .retailer-total,
.comparison-price,
.best-per-store-price,
.product-price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--cw-tabular);
}

/* ── Typography ───────────────────────────────────────────────── */
.cw-h1 {
  font-family: var(--cw-font-heading);
  font-size: 2.5rem;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--cw-ink);
}
.cw-h2 {
  font-family: var(--cw-font-heading);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.cw-h3 {
  font-family: var(--cw-font-heading);
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.cw-small {
  font-size: 0.8125rem;
  line-height: 1.4;
}
.cw-label {
  font-size: 0.6875rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cw-n500);
}

/* ── Navigation ───────────────────────────────────────────────── */
.cw-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
}
.cw-nav__link {
  color: var(--cw-n500);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.8rem;
  border-radius: var(--cw-radius-pill);
  transition: background var(--cw-ease), color var(--cw-ease);
}
.cw-nav__link:hover {
  color: var(--cw-ink);
  background: var(--cw-n100);
  text-decoration: none;
}
.cw-nav__link.is-active {
  color: var(--cw-primary);
  background: var(--cw-primary-light);
  font-weight: 600;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.35rem;
  font-family: var(--cw-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--cw-radius-pill);
  border: none;
  cursor: pointer;
  transition: background var(--cw-ease), box-shadow var(--cw-ease), transform var(--cw-ease);
}
.cw-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.cw-btn--primary {
  background: var(--cw-primary);
  color: var(--cw-primary-ink);
  box-shadow: 0 2px 10px oklch(0.52 0.12 255 / 0.28);
}
.cw-btn--primary:hover:not(:disabled) {
  background: var(--cw-primary-hover);
  box-shadow: 0 4px 16px oklch(0.52 0.12 255 / 0.32);
}
.cw-btn--secondary {
  background: var(--cw-surface);
  color: var(--cw-ink);
  border: 1px solid var(--cw-border);
}
.cw-btn--secondary:hover:not(:disabled) {
  background: var(--cw-n50);
  border-color: var(--cw-n300);
}
.cw-btn--accent {
  background: var(--cw-primary);
  color: var(--cw-primary-ink);
}

/* ── Cards (use sparingly) ────────────────────────────────────── */
.cw-card {
  background: var(--cw-surface);
  border: 1px solid var(--cw-border-subtle);
  border-radius: var(--cw-radius-card);
  box-shadow: var(--cw-shadow);
  transition: box-shadow var(--cw-ease), transform var(--cw-ease);
}
.cw-card--interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--cw-shadow-hover);
}

/* ── Badges ───────────────────────────────────────────────────── */
.cw-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.35rem 0.65rem;
  border-radius: var(--cw-radius-badge);
  letter-spacing: 0.02em;
}
.cw-badge--best {
  background: var(--cw-primary);
  color: var(--cw-primary-ink);
}
.cw-badge--drop {
  background: var(--cw-drop-bg);
  color: var(--cw-success);
}
.cw-badge--live {
  background: var(--cw-primary-light);
  color: var(--cw-primary);
  padding-left: 0.55rem;
}
.cw-badge__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cw-primary);
  margin-right: 0.2rem;
}
@media (prefers-reduced-motion: no-preference) {
  .cw-badge__dot {
    animation: cw-pulse 2.2s ease-in-out infinite;
  }
}
@keyframes cw-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── Skeleton ─────────────────────────────────────────────────── */
.cw-skeleton {
  background: linear-gradient(90deg, var(--cw-n100) 25%, var(--cw-n200) 50%, var(--cw-n100) 75%);
  background-size: 200% 100%;
  border-radius: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .cw-skeleton {
    animation: cw-shimmer 1.4s ease-in-out infinite;
  }
}
@keyframes cw-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Focus ────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.cw-focus:focus-visible {
  outline: 2px solid var(--cw-primary);
  outline-offset: 2px;
}

/* ── Brand ────────────────────────────────────────────────────── */
.cw-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--cw-ink);
  font-family: var(--cw-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.03em;
  transition: opacity var(--cw-ease);
}
.cw-brand:hover {
  opacity: 0.78;
  text-decoration: none;
  color: var(--cw-ink);
}
.cw-brand img {
  width: 28px;
  height: 28px;
  display: block;
  color: var(--cw-primary);
}

.cw-header-glass {
  background: oklch(0.975 0.008 255 / 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cw-border-subtle);
}

/* ── Atmosphere + motion feedback ─────────────────────────────── */
.cw-bg-wash {
  position: fixed;
  inset: -20% -10% auto;
  height: 70vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(55% 50% at 12% 18%, oklch(0.52 0.12 255 / 0.14), transparent 70%),
    radial-gradient(45% 40% at 88% 8%, oklch(0.72 0.10 65 / 0.10), transparent 68%),
    radial-gradient(40% 35% at 70% 55%, oklch(0.55 0.08 230 / 0.07), transparent 70%);
  will-change: transform;
}
body.cw-app > *:not(.cw-bg-wash) {
  position: relative;
  z-index: 1;
}
body.cw-app {
  background:
    linear-gradient(180deg, oklch(0.985 0.01 255) 0%, var(--cw-bg) 42%, oklch(0.97 0.01 250) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .cw-bg-wash {
    animation: cw-wash-drift 18s ease-in-out infinite alternate;
  }
}
@keyframes cw-wash-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(2%, 3%, 0) scale(1.04); }
}

.cw-reveal {
  opacity: 0;
  transform: translateY(18px);
}
.cw-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .cw-reveal {
    opacity: 1;
    transform: none;
  }
  .cw-bg-wash {
    animation: none;
  }
}

.cw-toast-host {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1200;
  display: grid;
  gap: 0.5rem;
  width: min(92vw, 380px);
  pointer-events: none;
}
.cw-toast {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background: oklch(0.28 0.03 260 / 0.92);
  color: oklch(0.98 0.01 255);
  box-shadow: 0 12px 40px oklch(0.28 0.025 260 / 0.22);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
}
.cw-toast__icon {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: oklch(0.78 0.12 165);
  box-shadow: 0 0 0 4px oklch(0.78 0.12 165 / 0.22);
}
.cw-toast--info .cw-toast__icon {
  background: oklch(0.72 0.12 255);
  box-shadow: 0 0 0 4px oklch(0.72 0.12 255 / 0.22);
}
.cw-toast--soft .cw-toast__icon {
  background: oklch(0.78 0.04 255);
  box-shadow: none;
}
.cw-toast__text {
  min-width: 0;
}

.basket-trigger.is-pulse {
  box-shadow: 0 0 0 6px var(--cw-primary-light);
}
.product-add-btn.is-just-added {
  background: var(--cw-primary-hover) !important;
}