/* ============================================================================================================
   Shubh Muhrat — brand.css: the ONE design system (PM's design.md, 2026-10-10 · assets/template_designs/shubhmuhrat/assets/design.md)
   Warm. Auspicious. Plain-spoken. Ivory and blush everywhere, Sindoor Wine only where it matters (CTAs, headings, logo).

   Source of truth = the palette SHEET (design.md §2.1 / §2.6 says pick one: we picked the sheet, not the drifted homepage CSS).
   Every page loads this file first and builds on the --sm-* tokens; page CSS may alias its old names to them
   (e.g. --gold → --sm-wine) but never adds new brand colours. Measured pairs (design.md §2.4): Kohl Plum on Ivory 12.7:1,
   Wine on Ivory 8.4:1, white on Wine 9.0:1, body #6B5A5D 6.0:1, --sm-rose-text 4.6:1 (small caps OK), Dusty Rose 3.4:1
   (large text / icons ONLY), Champagne + Rose Clay = decoration only, never text.
   ============================================================================================================ */
@import url('/static/fonts/brand-fonts.css');

:root {
  /* surfaces (share: ivory 45% · blush 20% · paper 5%) */
  --sm-bg: #FBF7F2;          /* Ivory Silk — the page */
  --sm-bg-alt: #F5E9E3;      /* Blush Veil — alternating sections, journey band, closing band */
  --sm-surface: #FFFDFB;     /* Paper — cards, modals, the mobile menu, the footer (raised things only) */
  --sm-line: #EADBD4;        /* Petal Line — every border and divider */
  --sm-wash: linear-gradient(180deg, #FCF6F2, #F7ECE7);   /* the ONE allowed gradient: a faint vertical wash */

  /* text */
  --sm-ink: #3A2A2F;         /* Kohl Plum — nav, labels, list items */
  --sm-text: #6B5A5D;        /* body copy */
  --sm-muted: #7C6D72;       /* captions, notes, fine print */

  /* brand */
  --sm-wine: #7D2E3E;        /* Sindoor Wine — THE only button colour, headings, logo */
  --sm-wine-hover: #66202F;
  --sm-wine-soft: rgba(125, 46, 62, .08);
  --sm-rose: #B8737A;        /* Dusty Rose — icons, ornaments, hairlines (never small text) */
  --sm-rose-text: #B4524E;   /* readable rose for eyebrows / small labels */
  --sm-clay: #D9A49B;        /* Rose Clay — secondary accents, fills */
  --sm-champagne: #BFA27A;   /* decoration only: foil details, a seal, a thin frame */
  --sm-icon-well: #F4E1DB;   /* circle behind icons */

  /* status (guest manager & co.) — always with an icon AND a word */
  --sm-ok-bg: #E9F2EA; --sm-ok: #2F6B45;
  --sm-wait-bg: #FBF0DC; --sm-wait: #8A5A12;
  --sm-no-bg: #F8E4E2; --sm-no: #9B2C2C;

  /* type */
  --sm-serif: 'Cormorant Garamond', Georgia, serif;
  --sm-sans: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* shape + depth (border first; shadows long, low, wine-tinted, never grey) */
  --sm-r-pill: 999px; --sm-r-card: 22px; --sm-r-hero: 28px; --sm-r-tile: 18px; --sm-r-field: 12px;
  --sm-shadow-rest: 0 12px 26px -18px rgba(90, 30, 40, .5);
  --sm-shadow-hover: 0 30px 60px -40px rgba(90, 30, 40, .45);
  --sm-shadow-hero: 0 40px 80px -50px rgba(90, 30, 40, .55);
  --sm-shadow-btn: 0 10px 24px -14px rgba(126, 34, 54, .7);
  --sm-shadow-pop: 0 24px 60px -24px rgba(90, 30, 40, .35);

  /* layout + motion */
  --sm-maxw: 1320px; --sm-gutter: clamp(20px, 4vw, 64px);
  --sm-section: clamp(64px, 7vw, 96px);
  --sm-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── base (only for pages that opt in with <body class="sm">) ── */
.sm { background: var(--sm-bg); color: var(--sm-text); font: 400 17px/1.65 var(--sm-sans); -webkit-font-smoothing: antialiased; }
.sm h1, .sm h2, .sm h3 { font-family: var(--sm-serif); font-weight: 600; color: var(--sm-wine); margin: 0; }
.sm h1 i, .sm h2 i, .sm h3 i, .sm h1 em, .sm h2 em, .sm h3 em { font-weight: 500; font-style: italic; }
.sm :focus-visible { outline: 2px solid var(--sm-wine); outline-offset: 3px; border-radius: 8px; }
.sm-wrap { max-width: var(--sm-maxw); margin: 0 auto; padding: 0 var(--sm-gutter); }

/* type scale (design.md §3.2) */
.sm-h1 { font: 600 clamp(46px, 5.4vw, 80px)/1.02 var(--sm-serif); color: var(--sm-wine); }
.sm-h2 { font: 600 clamp(38px, 4.2vw, 58px)/1.06 var(--sm-serif); color: var(--sm-wine); }
.sm-h3 { font: 600 clamp(32px, 2.9vw, 42px)/1.05 var(--sm-serif); color: var(--sm-wine); }
.sm-eyebrow { font: 500 13px/1.2 var(--sm-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--sm-rose-text); }
.sm-lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--sm-text); max-width: 34em; }
.sm-note { font-size: 14px; color: var(--sm-muted); }

/* buttons: wine is the ONLY primary; ghost = wine outline. Sentence case. Pill. */
.sm-btn { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 13px 28px;
  border: 0; border-radius: var(--sm-r-pill); background: var(--sm-wine); color: #fff; font: 500 16px/1.1 var(--sm-sans);
  text-decoration: none; cursor: pointer; box-shadow: var(--sm-shadow-btn);
  transition: background-color .25s var(--sm-ease), transform .25s var(--sm-ease), box-shadow .25s var(--sm-ease); }
/* `a.sm-btn` + `.sm a.sm-btn`: page rules like `.sm a { color: inherit }` must never repaint a button label */
.sm-btn, a.sm-btn, .sm a.sm-btn, .sm a.sm-btn:visited { color: #fff; }
.sm-btn:hover, .sm a.sm-btn:hover { background: var(--sm-wine-hover); transform: translateY(-1px); color: #fff; }
.sm-btn .sm-arr { transition: transform .25s var(--sm-ease); }
.sm-btn:hover .sm-arr { transform: translateX(3px); }
.sm-btn-ghost, a.sm-btn-ghost, .sm a.sm-btn-ghost, .sm a.sm-btn-ghost:visited { background: transparent; color: var(--sm-wine); border: 1.5px solid rgba(125, 46, 62, .35); box-shadow: none; }
.sm-btn-ghost:hover, .sm a.sm-btn-ghost:hover { background: #fff; color: var(--sm-wine); border-color: var(--sm-wine); }
.sm-btn-sm { min-height: 40px; padding: 8px 20px; font-size: 15px; }
@media (max-width: 479px) { .sm-btn-block-phone { width: 100%; } }

/* cards: Paper + 1px Petal Line, 22px; shadow only on hover */
.sm-card { background: var(--sm-surface); border: 1px solid var(--sm-line); border-radius: var(--sm-r-card); }
.sm-card-lift { transition: transform .3s var(--sm-ease), box-shadow .3s var(--sm-ease); }
.sm-card-lift:hover { transform: translateY(-3px); box-shadow: var(--sm-shadow-hover); }

/* icon well (outline icons, 1.6px stroke, wine on #F4E1DB) */
.sm-ic { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--sm-icon-well); color: var(--sm-wine); }
.sm-ic svg { width: 20px; height: 20px; }
.sm-ic-36 { width: 36px; height: 36px; } .sm-ic-46 { width: 46px; height: 46px; } .sm-ic-72 { width: 72px; height: 72px; }

/* the one reusable ornament: a hairline fading at both ends with a small rotated diamond in the centre */
.sm-orn { display: flex; align-items: center; gap: 14px; color: var(--sm-rose); }
.sm-orn::before, .sm-orn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor); opacity: .55; }
.sm-orn::after { background: linear-gradient(90deg, currentColor, transparent); }
.sm-orn > span { font: 500 13px/1 var(--sm-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--sm-rose-text); }
.sm-orn > .sm-diamond, .sm-diamond { width: 8px; height: 8px; flex: none; border: 1px solid currentColor; transform: rotate(45deg); background: var(--sm-bg); }

/* chips / tabs */
.sm-chip { display: inline-flex; box-sizing: border-box; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--sm-r-pill);
  border: 1px solid var(--sm-line); background: var(--sm-surface); color: var(--sm-ink); font: 500 15px/1.1 var(--sm-sans); cursor: pointer; }
.sm-chip[aria-pressed="true"], .sm-chip.is-on { background: var(--sm-wine); border-color: var(--sm-wine); color: #fff; }

/* form fields */
.sm-field { width: 100%; min-height: 48px; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--sm-line); border-radius: var(--sm-r-field);
  background: var(--sm-surface); color: var(--sm-ink); font: 400 16px/1.3 var(--sm-sans); }
.sm-field:focus { outline: none; border-color: var(--sm-wine); box-shadow: 0 0 0 3px rgba(125, 46, 62, .12); }

/* status pills — colour + icon + word */
.sm-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--sm-r-pill); font: 500 13px/1.2 var(--sm-sans); }
.sm-status-ok { background: var(--sm-ok-bg); color: var(--sm-ok); } .sm-status-wait { background: var(--sm-wait-bg); color: var(--sm-wait); }
.sm-status-no { background: var(--sm-no-bg); color: var(--sm-no); }

/* skip link (design.md §8) */
.sm-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: var(--sm-r-pill); background: var(--sm-wine); color: #fff;
  font: 500 15px var(--sm-sans); text-decoration: none; }
.sm-skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .sm *, .sm *::before, .sm *::after { transition: none !important; animation: none !important; }
  .sm-btn:hover, .sm-card-lift:hover { transform: none; }
}