/* THEME.CSS — GlacialSips brand tokens.
   Swap this single file to change the entire look and feel.
   No layout, no structure — only design tokens. */

:root {
  /* ── Palette ── */
  --bg:     #060c1a;
  --bg2:    #0a1425;
  --bg3:    #0e1c30;
  --bg4:    #132540;
  --ink:    #f0ece0;
  --ink2:   #d8d2c2;
  --ink3:   #a09882;
  --ink4:   #6a6456;
  --accent: #c8a44e;
  --accent-dim: rgba(200,164,78,.25);
  --accent-wash: rgba(200,164,78,.07);
  --red:    #c45c4a;
  --data:   #c8a44e;
  --ok:     #4a8f6a;
  --green:  #5a9a6a;
  --rule:   rgba(240,236,224,.08);
  --grain:  rgba(240,236,224,.012);
  --overlay-bg: rgba(4,8,20,.88);

  /* ── Nav ── */
  --nav-h:  56px;
  --nav-bg: rgba(6,12,26,.92);
  --hero-bg: #060c1a;

  /* ── Typography ── */
  --f-head:  'Cinzel', serif;
  --f-body:  'Cormorant Garamond', serif;
  --f-ui:    'Raleway', sans-serif;
  --f-mono:  'IBM Plex Mono', monospace;
  --f-quote: 'Cormorant Garamond', serif;
  --f-pillar:'Cinzel', serif;

  /* ── Sizes ── */
  --sz-hero:   clamp(48px,8vw,88px);
  --sz-h2:     clamp(31px,4.4vw,53px);
  --sz-h3:     clamp(22px,2.75vw,31px);
  --sz-body:   19px;
  --sz-sm:     15px;
  --sz-xs:     11px;
  --sz-mono:   14px;
  --sz-btn:    11px;
  --sz-nav:    12px;
  --sz-brand:  15px;
  --sz-card:   clamp(24px,2.75vw,35px);
  --sz-svc:    clamp(24px,3.1vw,35px);
  --sz-price:  29px;
  --sz-stat:   clamp(32px,5vw,52px);
  --sz-guar:   clamp(56px,8vw,96px);
  --sz-ticker: 10px;
  --sz-feat:   10px;
  --sz-pillar: clamp(16px,1.8vw,20px);
  --sz-quote:  clamp(18px,2.2vw,26px);

  /* ── Spacing ── */
  --sp-h:      52px;
  --sp-v:      90px;
  --sp-rule:   20px;
  --sp-btn:    13px;
  --sp-btn-h:  28px;
  --img-h:     180px;
  --pillar-pad:32px 28px;
  --guar-min:  160px;

  /* ── Tracking ── */
  --ls-head: .04em;
  --ls-wide: .28em;
  --ls-nav:  .18em;
  --ls-mono: .06em;
  --ls-btn:  .22em;
  --ls-feat: .08em;
  --ls-pnote:.18em;

  /* ── Cards ── */
  --card-border:      rgba(240,236,224,.08);
  --card-tier:        var(--accent);
  --card-gold-bg:     rgba(200,164,78,.04);
  --card-gold-border: rgba(200,164,78,.18);
  --card-blue-border: rgba(74,143,170,.18);
  --feat-sep:         rgba(240,236,224,.06);
  --feat-off:         rgba(240,236,224,.18);

  /* ── Gap callout ── */
  --gap-bg:     rgba(200,164,78,.06);
  --gap-border: var(--accent);
  --gap-ink1:   var(--accent);
  --gap-ink2:   var(--ink2);

  /* ── Ticker ── */
  --ticker-pad: 11px;
  --ticker-spd: 38s;
  --ticker-c:   var(--ink3);
  --ticker-gap:  44px;
}

/* ── Green confirmation box ── */
.green-box {
  background: rgba(74, 143, 106, .08);
  border-left: 3px solid var(--ok);
  border-radius: 4px;
  padding: 16px 18px;
  color: var(--ink);
  margin-bottom: 12px;
}

.green-box-title {
  font-weight: 700;
  font-size: 1.05em;
  margin-bottom: 8px;
  color: var(--ok);
}

.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--sz-body);
}

.check-item::before {
  content: "\2713";
  color: var(--ok);
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 4px;
}