/*
  Shared brand tokens — "Come to My Wedding" (placeholder name)
  ===============================================================
  Used by BOTH the public homepage (css/home.css) and the admin
  dashboard (css/admin.css), so the two feel like one product
  rather than two unrelated tools. Each wedding's own guest-facing
  pages (each wedding's own css/style.css) stay fully custom per
  couple and do NOT use these tokens — only the platform's own
  surfaces do.

  Dusty rose/mauve paper, with a deep wine/maroon accent built as
  tints of #241016 (the reference color) rather than a separate hue —
  warm gold as a secondary decorative accent. Cormorant Garamond
  (display) + Inter (text) throughout.

  Note: the --rose/--rose-deep/--rose-hover variable names predate
  this palette (it used to be an actual rose/pink accent, then
  briefly violet) — kept as-is rather than renamed everywhere.
*/

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap");

:root {
  --paper: #fbf6f4;
  --paper-soft: #f6ecec;
  --card: #ffffff;
  --ink: #2a1338;
  --ink-soft: #6f5866;
  --line: #e6d3d6;
  --rose: #5c2436;
  --rose-deep: #3a1220;
  --rose-hover: #241016;
  --rose-tint: #f3e4e8;
  --gold: #c9972b;
  --gold-tint: #faf1de;
  --sage: #6f8f5b;
  --sage-tint: #eaf1e6;

  /* Solid button fill — the reference color itself. */
  --btn-bg: #241016;
  --btn-bg-hover: #3a1220;

  --font-display: "Cormorant Garamond", "Iowan Old Style", serif;
  --font-text: "Inter", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(58, 18, 32, 0.06), 0 1px 1px rgba(58, 18, 32, 0.04);
  --shadow-md: 0 8px 24px rgba(58, 18, 32, 0.08), 0 2px 6px rgba(58, 18, 32, 0.05);
  --shadow-lg: 0 20px 48px rgba(58, 18, 32, 0.12), 0 4px 12px rgba(58, 18, 32, 0.06);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark mode is disabled for now — the platform defaults to light
   regardless of system preference (see html { color-scheme } below).
   Nothing currently sets [data-theme="dark"], so this block is dead
   until a manual toggle exists; the tokens are kept ready for that.
   To re-enable following system preference again, wrap this same
   rule back in `@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ... } }`. */
:root[data-theme="dark"] {
  --paper: #241016;
  --paper-soft: #301620;
  --card: #2d1620;
  --ink: #f3e6ea;
  --ink-soft: #cbb4bd;
  --line: #4a2331;
  --rose: #dba3b3;
  --rose-deep: #f0c9d3;
  --rose-hover: #f7dbe1;
  --rose-tint: #3a1e28;
  --gold: #e0bb6a;
  --gold-tint: #3a2e17;
  --sage: #a8c194;
  --sage-tint: #223022;

  /* The light theme's --btn-bg (#241016) is this theme's *background*
     here, so it can't also be the button fill — it'd vanish against
     its own page. A mid-tone step of the same wine family stands out
     against it instead, while staying one hue with everything else. */
  --btn-bg: #7a3349;
  --btn-bg-hover: #93415a;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Shared surface for cards across home + admin: white panel lifted
   off the tinted paper background with a soft shadow, rather than a
   flat bordered box. */
.surface {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 3px;
}

a {
  color: var(--rose-deep);
}

img,
svg {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Language dropdown — shared by the homepage and the admin login /
   dashboard header, so it looks and behaves the same everywhere. */

.lang-select {
  appearance: none;
  background: var(--paper-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f5866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.7rem center / 0.8em;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 0.85rem;
  padding: 0.45rem 2rem 0.45rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}

.lang-select:hover {
  border-color: var(--rose);
}

/* -- shared button component (home CTAs + admin actions) -------------- */

.btn,
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-text);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

.btn:hover {
  border-color: var(--rose);
  color: var(--rose-deep);
  transform: translateY(-1px);
}

.btn-primary,
.btn-cta {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-cta:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active,
.btn-cta:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-cta {
    transition: none;
  }
}