/* =========================================================
   UR Invited — Brand System (2026 redesign)
   "Joyful Premium": one confident coral, warm ivory canvas,
   expressive serif display + clean grotesque body, generous
   rounded warmth, soft layered shadows. Loaded LAST so it
   unifies tokens across every page (fixes the old blue-vs-
   terracotta split into a single brand accent).
   ========================================================= */
:root, [data-theme='light'] {
  /* --- Canvas: refined warm ivory (cleaner than the old yellow cream) --- */
  --color-bg: #faf7f2;
  --color-surface: #ffffff;
  --color-surface-2: #ffffff;
  --color-surface-offset: #f4eee5;
  --color-surface-offset-2: #ece4d8;
  --color-surface-dynamic: #e7ddcc;
  --color-divider: #efe8dd;
  --color-border: #e6ddce;

  /* --- Ink: warm near-black (a hair of plum, not cold navy) --- */
  --color-text: #241f2a;
  --color-text-muted: #6d6675;
  --color-text-faint: #a79fac;
  --color-text-inverse: #ffffff;

  /* --- THE brand accent: a confident, joyful coral --- */
  --brand: #ef5b4c;
  --brand-600: #e0473a;
  --brand-700: #c3392e;
  --brand-100: #fbe3de;
  --brand-050: #fdf1ee;

  --color-primary: var(--brand);
  --color-primary-hover: var(--brand-600);
  --color-primary-active: var(--brand-700);
  --color-primary-highlight: var(--brand-100);

  /* Marketing CTA + primary product action now share ONE color */
  --color-cta: var(--brand);
  --color-cta-hover: var(--brand-600);
  --color-cta-active: var(--brand-700);
  --color-cta-text: #ffffff;

  /* Secondary warm gold — stars, tiny highlights only */
  --color-accent: #e6a636;
  --color-accent-hover: #cc8f22;
  --color-accent-highlight: #f7e7c4;

  /* A calm ink-blue reserved for quiet informational chrome */
  --color-info: #3f6fa3;

  /* --- Generous, rounded warmth --- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.4rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* --- Softer, warmer shadows --- */
  --shadow-sm: 0 1px 2px rgba(46,28,22,0.05);
  --shadow-md: 0 10px 28px -12px rgba(58,38,28,0.18);
  --shadow-lg: 0 30px 64px -26px rgba(58,38,28,0.26);
  --shadow-card: 0 26px 56px -24px rgba(70,44,34,0.30);
  --shadow-brand: 0 16px 34px -12px rgba(224,71,58,0.42);

  --font-display: 'Boska', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'General Sans', 'Inter', system-ui, sans-serif;
  --font-script: 'Caveat', 'Brush Script MT', cursive;
}

/* Selection + focus pick up the coral automatically via --color-primary. */
::selection { background: var(--brand-100); color: var(--color-text); }

/* ---------------------------------------------------------
   Universal button system — one shape language everywhere.
   Overrides the older .btn rules (loaded earlier).
   --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.975rem;
  line-height: 1;
  padding: 0.85em 1.4em;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out, ease), box-shadow 200ms ease,
    background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn svg { width: 1em; height: 1em; }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: 0 20px 40px -12px rgba(224,71,58,0.5); }
.btn--primary:active { background: var(--brand-700); }

.btn--large { font-size: 1.06rem; padding: 1.02em 1.7em; }

.btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Small chip / pill used for tags + eyebrows. */
.uv-chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.02em;
  padding: 0.34em 0.72em;
  border-radius: var(--radius-full);
  background: var(--brand-050); color: var(--brand-700);
}