/* ==========================================================================
   Puskar Music — Wedding Toolkit (V2 Enhanced Design System)
   Brand tokens lifted from puskarsilwal.com with elevated luxury editorial styling.
   Light working surface, dark chrome, warm champagne & gold accents.
   ========================================================================== */

:root{
  /* --- brand, from the live site --- */
  --ink:#0C0A08;
  --carbon:#1A1612;
  --bone:#F5EFE6;
  --parchment:#E8DFD3;
  --sand:#A89B86;
  --champagne:#C9A87C;
  --champagne-light:#EFE4D2;
  --gold:#B8956A;
  --rose:#8B4D5C;

  /* --- gradients & luxury accents --- */
  --grad-champagne: linear-gradient(135deg, #DFCA9E 0%, #C9A87C 50%, #B8956A 100%);
  --grad-gold-soft: linear-gradient(135deg, rgba(223,202,158,0.2) 0%, rgba(201,168,124,0.12) 100%);
  --grad-dark: linear-gradient(180deg, #1C1713 0%, #0C0A08 100%);
  --grad-surface: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);

  /* --- light working surface, derived --- */
  --bg:#F7F2EA;
  --surface:#FFFCF6;
  --surface-2:#F8F2E7;
  --surface-card:var(--surface);
  --text:#0C0A08;
  --text-2:#443B30;
  --text-3:#7A6E5E;
  --line:#E2D8C7;
  --line-2:#EFE7DB;

  /* champagne is too pale for text on cream, so text gold is darkened */
  --accent:#85622C;
  --accent-line:#C9A87C;
  --accent-bg:#F4EADC;

  /* semantic */
  --ok:#3E6239;
  --ok-bg:#EBF2E8;
  --warn:#8C4B1F;
  --warn-bg:#F9EBE1;
  --alert:#8E4656;
  --alert-bg:#F8E5E9;

  --chrome:#0C0A08;
  --chrome-2:#16120E;
  --chrome-text:#F5EFE6;
  --chrome-text-2:#BDB2A2;

  --sel-bg:#0C0A08;
  --sel-fg:#F5EFE6;
  --sel-dim:#A99E90;

  /* Layered luxury soft shadows */
  --shadow-xs: 0 1px 2px rgba(12,10,8,.04);
  --shadow-sm: 0 2px 4px rgba(12,10,8,.03), 0 1px 2px rgba(12,10,8,.04);
  --shadow: 0 4px 14px -2px rgba(12,10,8,.06), 0 2px 4px rgba(12,10,8,.03);
  --shadow-md: 0 12px 28px -4px rgba(12,10,8,.08), 0 4px 8px -2px rgba(12,10,8,.04);
  --shadow-lg: 0 20px 42px -8px rgba(12,10,8,.11), 0 8px 16px -4px rgba(12,10,8,.05);
  --shadow-glow: 0 0 0 1px rgba(201,168,124,0.32), 0 8px 24px -2px rgba(201,168,124,0.24);

  --radius:12px;
  --radius-sm:7px;
  --radius-lg:18px;

  --measure:68ch;
  --wide:1220px;

  --font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-accent:"Italiana", "Cormorant Garamond", Georgia, serif;
  --font-body:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.24s var(--ease-out);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C0A08;
    --surface:#16120F;
    --surface-2:#1C1713;
    --surface-card:#1A1512;
    --text:#F5EFE6;
    --text-2:#CFC5B6;
    --text-3:#988E7E;
    --line:#2E261E;
    --line-2:#221C16;
    --accent:#D8B57E;
    --accent-line:#8A6E44;
    --accent-bg:#261C10;
    --ok:#A3C69C;   --ok-bg:#162215;
    --warn:#E4A477; --warn-bg:#2A180E;
    --alert:#D8919F; --alert-bg:#2A1419;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 4px rgba(0,0,0,.4);
    --shadow: 0 6px 18px rgba(0,0,0,.45);
    --shadow-md: 0 14px 32px rgba(0,0,0,.55);
    --shadow-lg: 0 22px 48px rgba(0,0,0,.65);
    --shadow-glow: 0 0 0 1px rgba(201,168,124,0.4), 0 8px 24px rgba(201,168,124,0.18);
    --sel-bg:#C9A87C; --sel-fg:#0C0A08; --sel-dim:#5C4A2E;
  }
}
:root[data-theme="dark"]{
  --bg:#0C0A08;
  --surface:#16120F;
  --surface-2:#1C1713;
  --surface-card:#1A1512;
  --text:#F5EFE6;
  --text-2:#CFC5B6;
  --text-3:#988E7E;
  --line:#2E261E;
  --line-2:#221C16;
  --accent:#D8B57E;
  --accent-line:#8A6E44;
  --accent-bg:#261C10;
  --ok:#A3C69C;   --ok-bg:#162215;
  --warn:#E4A477; --warn-bg:#2A180E;
  --alert:#D8919F; --alert-bg:#2A1419;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.4);
  --shadow: 0 6px 18px rgba(0,0,0,.45);
  --shadow-md: 0 14px 32px rgba(0,0,0,.55);
  --shadow-lg: 0 22px 48px rgba(0,0,0,.65);
  --shadow-glow: 0 0 0 1px rgba(201,168,124,0.4), 0 8px 24px rgba(201,168,124,0.18);
  --sel-bg:#C9A87C; --sel-fg:#0C0A08; --sel-dim:#5C4A2E;
}

/* ==========================================================================
   Base
   ========================================================================== */

*{box-sizing:border-box;}
[hidden]{display:none!important;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
.skip-link{position:fixed;left:16px;top:12px;z-index:100;transform:translateY(-150%);background:var(--bone);color:var(--ink);padding:9px 14px;border-radius:6px;font-weight:600;}
.skip-link:focus{transform:translateY(0);}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;}
a{color:var(--accent);text-underline-offset:3px;transition:var(--transition);}
a:hover{color:var(--text);}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  margin:0;
  line-height:1.14;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.3rem,5.5vw,3.6rem);}
h2{font-size:clamp(1.7rem,3.6vw,2.45rem);}
h3{font-size:1.35rem;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
strong,b{font-weight:600;}
small{font-size:.86em;}

:focus-visible{outline:2px solid var(--accent-line);outline-offset:3px;border-radius:4px;}

.shell{max-width:var(--wide);margin:0 auto;padding:0 24px;}
.narrow{max-width:var(--measure);}
.stack > * + *{margin-top:var(--gap,16px);}

/* ==========================================================================
   Chrome: dark header and footer with atmospheric glow
   ========================================================================== */

.chrome{background:var(--chrome);color:var(--chrome-text);}
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(12, 10, 8, 0.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--chrome-text);
  border-bottom:1px solid rgba(201,168,124,0.15);
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
}
.topbar .shell{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:14px;padding-bottom:14px;
}
.brand{
  font-family:var(--font-accent);
  font-size:1.18rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--chrome-text);text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px;
  transition:var(--transition);
}
.brand span{color:var(--champagne);font-style:italic;}
.brand:hover{opacity:.9;transform:translateX(1px);}

.topnav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;align-items:center;}
.topnav a{
  color:var(--chrome-text-2);text-decoration:none;font-size:13.5px;font-weight:400;
  padding:7px 15px;border-radius:100px;letter-spacing:.02em;
  transition:var(--transition);border:1px solid transparent;
}
.topnav a:hover{
  color:var(--chrome-text);
  background:rgba(245,239,230,.08);
  border-color:rgba(245,239,230,.12);
}
.topnav a[aria-current="page"]{
  color:var(--ink);background:var(--grad-champagne);
  font-weight:500;box-shadow:0 2px 10px rgba(201,168,124,0.3);
}

.hero{
  background:
    radial-gradient(circle at 50% -15%, rgba(201,168,124,0.18) 0%, transparent 68%),
    radial-gradient(circle at 90% 100%, rgba(201,168,124,0.08) 0%, transparent 50%),
    var(--chrome);
  color:var(--chrome-text);
  padding:clamp(52px,7.5vw,94px) 0 clamp(44px,6.5vw,76px);
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(201,168,124,0.15);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 75%, rgba(12,10,8,0.6) 100%);
  pointer-events:none;
}
.hero .shell{position:relative;z-index:2;}
.hero .eyebrow{color:var(--champagne);display:inline-flex;align-items:center;gap:7px;}
.hero .eyebrow::before{content:"\2726";font-size:10px;opacity:.8;}
.hero h1{color:var(--bone);letter-spacing:-.015em;text-shadow:0 2px 12px rgba(0,0,0,0.3);}
.hero .lede{
  color:#DCD3C6;font-size:clamp(1.05rem,2vw,1.22rem);
  max-width:54ch;margin-top:18px;font-weight:300;line-height:1.65;
}

.sitefoot{
  background:var(--chrome);color:var(--chrome-text-2);
  padding:38px 0 48px;font-size:14px;margin-top:auto;
  border-top:1px solid rgba(201,168,124,0.12);
}
.sitefoot a{color:var(--champagne);}
.sitefoot a:hover{color:var(--bone);text-decoration:underline;}
.sitefoot .row{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:center;}

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.eyebrow{
  font-family:var(--font-body);
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}
.eyebrow.quiet{color:var(--text-3);}
.lede{font-size:1.18rem;line-height:1.6;color:var(--text-2);font-weight:300;}
.muted{color:var(--text-3);}
.tnum{font-variant-numeric:tabular-nums;}
.rule{border:0;border-top:1px solid var(--line);margin:0;}

/* ==========================================================================
   Sections and cards
   ========================================================================== */

section{padding:clamp(42px,5.5vw,70px) 0;}
section.tight{padding:clamp(28px,3.8vw,44px) 0;}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:var(--transition);
}
.card:hover{
  border-color:rgba(201,168,124,0.45);
  box-shadow:var(--shadow-md);
}
.card-pad{padding:clamp(22px,3.2vw,34px);}

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  transition:var(--transition);
}

.note{
  border-radius:var(--radius-sm);
  padding:15px 19px;
  font-size:14.5px;line-height:1.55;
  background:var(--accent-bg);
  border:1px solid rgba(201,168,124,0.3);
  color:var(--text-2);
  display:flex;gap:13px;align-items:flex-start;
  transition:var(--transition);
}
.note b{color:var(--text);}
.note .tag{
  flex:none;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);padding:2px 8px;border-radius:100px;background:rgba(201,168,124,0.18);
}
.note.ok{background:var(--ok-bg);border-color:rgba(62,98,57,0.25);} .note.ok .tag{color:var(--ok);background:rgba(62,98,57,0.18);}
.note.warn{background:var(--warn-bg);border-color:rgba(140,75,31,0.25);} .note.warn .tag{color:var(--warn);background:rgba(140,75,31,0.18);}
.note.alert{background:var(--alert-bg);border-color:rgba(142,70,86,0.25);} .note.alert .tag{color:var(--alert);background:rgba(142,70,86,0.18);}

/* ==========================================================================
   Forms
   ========================================================================== */

label{
  display:block;font-size:12px;font-weight:600;color:var(--text-2);
  margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase;
}
input[type=text],input[type=date],input[type=time],input[type=number],input[type=search],
select,textarea{
  width:100%;
  font-family:var(--font-body);font-size:15px;font-weight:400;
  color:var(--text);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 14px;
  transition:var(--transition);
  box-shadow:inset 0 1px 2px rgba(12,10,8,0.03);
}
input[type=text]:hover,input[type=date]:hover,input[type=time]:hover,input[type=number]:hover,
select:hover,textarea:hover{
  border-color:var(--accent-line);
}
input[type=text]:focus,input[type=date]:focus,input[type=time]:focus,input[type=number]:focus,
select:focus,textarea:focus{
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px rgba(201,168,124,0.22);
  outline:none;background:var(--surface);
}
textarea{line-height:1.55;resize:vertical;}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:.65;}
select{
  appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
                   linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field{margin-bottom:16px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
fieldset{border:0;padding:0;margin:0 0 24px;}
legend{
  padding:0;margin-bottom:12px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
}
.check{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:14.5px;font-weight:400;color:var(--text);padding:7px 0;margin:0;
  transition:var(--transition);
}
.check:hover{color:var(--accent);}
.check input{
  width:18px;height:18px;flex:none;accent-color:var(--gold);margin:0;cursor:pointer;
  border-radius:4px;
}

/* ==========================================================================
   Buttons with tactile feel and luxury finishes
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:.02em;
  color:var(--text);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 18px;cursor:pointer;text-decoration:none;
  transition:var(--transition);
  box-shadow:var(--shadow-xs);
  user-select:none;
}
.btn:hover{
  border-color:var(--accent-line);
  color:var(--text);
  transform:translateY(-1.5px);
  box-shadow:var(--shadow-sm);
}
.btn:active{
  transform:translateY(0.5px);
}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important;}

.btn-primary{
  background:var(--sel-bg);
  border-color:var(--sel-bg);
  color:var(--sel-fg);
  box-shadow:0 2px 8px rgba(12,10,8,0.15);
}
.btn-primary:hover{
  filter:brightness(1.15);
  box-shadow:0 4px 14px rgba(12,10,8,0.25);
}

.btn-gold{
  background:var(--grad-champagne);
  border-color:transparent;
  color:var(--ink);
  font-weight:600;
  box-shadow:0 3px 12px rgba(201,168,124,0.3);
}
.btn-gold:hover{
  box-shadow:0 6px 18px rgba(201,168,124,0.45);
  filter:brightness(1.05);
  color:var(--ink);
}

.btn-quiet{background:none;border-color:transparent;color:var(--text-3);box-shadow:none;}
.btn-quiet:hover{color:var(--text);background:rgba(201,168,124,0.12);border-color:transparent;}

.btn-sm{font-size:13px;padding:7px 14px;border-radius:6px;}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap{overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;}
table.data th{
  text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);padding:14px 12px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.data td{padding:12px;border-bottom:1px solid var(--line-2);vertical-align:top;}
table.data tr:last-child td{border-bottom:0;}
table.data tr:hover td{background:rgba(201,168,124,0.04);}

/* ==========================================================================
   Bits & Badges
   ========================================================================== */

.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 11px;border-radius:100px;background:var(--accent-bg);color:var(--accent);
  border:1px solid rgba(201,168,124,0.3);
}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(62,98,57,0.25);}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:rgba(140,75,31,0.25);}
.pill.quiet{background:var(--surface-2);color:var(--text-3);border-color:var(--line);}

.privacy{
  font-size:13.5px;color:var(--text-3);
  display:flex;gap:10px;align-items:flex-start;line-height:1.55;
}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:var(--sel-bg);color:var(--sel-fg);
  font-size:14px;font-weight:500;padding:12px 24px;border-radius:100px;
  box-shadow:0 10px 30px rgba(12,10,8,.35);
  border:1px solid rgba(201,168,124,0.3);
  opacity:0;pointer-events:none;transition:all .22s var(--ease-out);z-index:70;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

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

@media (max-width:720px){
  .field-row{grid-template-columns:1fr;}
  .topnav{margin-left:0;width:100%;}
}

/* ==========================================================================
   Print — clean, elegant typography for paper & PDF
   ========================================================================== */

@media print{
  @page{size:A4 portrait;margin:14mm 13mm;}
  body{background:#fff!important;color:#000!important;font-size:10.5pt;}
  .topbar,.hero,.sitefoot,.no-print,.toast{display:none!important;}
  section{padding:0;}
  .shell{max-width:none;padding:0;}
  .card,.panel{border:0;border-radius:0;box-shadow:none;background:#fff;}
  .card-pad{padding:0;}
  .note{background:#f4f4f4!important;border:1px solid #ddd!important;color:#000;page-break-inside:avoid;}
  table.data tr{page-break-inside:avoid;}
  .print-only{display:block!important;}
  a{color:#000;text-decoration:none;}
}
.print-only{display:none;}