/* Ember Glass theme: the single source of the site's colors.
   Every page links this file before its own <style>, so page rules win on
   conflicts. Token NAMES are the ones the old per-file :root{} blocks used,
   so existing CSS reads them unchanged; only the values are light now.
   Rules here stay low-specificity on purpose (plain classes, :where() for
   elements) and never use !important outside the reduced-motion block.
   A palette change is an edit to this file plus a ?v=N bump on every link.
   No @import and no external URLs: pages link /fonts/fonts.css themselves. */

/* 1. Tokens ------------------------------------------------------------ */
:root{
  --obsidian:#FFF9F3;   /* page background (cream) */
  --deep:#FFF3E8;       /* alternate section background */
  --ash:#FFFFFF;        /* solid card background */
  --ash-light:#EADBCB;  /* borders, dividers */
  --frost:#2A1B10;      /* main text */
  --smoke:#6B5444;      /* muted text */
  --white:#FFFFFF;
  --ember:#D04B18;      /* accents, focus ring, fills. Only 4.47:1 on white, so not for text. */
  --ember-hot:#F06828;  /* wordmark only */
  --ember-btn:#BF4415;  /* button fill, 5.2:1 with white text */
  --ember-btn-hover:#A93B11; /* filled-button hover */
  --ember-dim:#FBE3D6;  /* tinted accent background */
  --ember-text:#93320F; /* ember-colored TEXT (links): 5.14:1 even on the raw #FFC79A glow, 7.77:1 on white */
  /* Kept defined so old rules don't break; the decorations that used them are removed. */
  --brass:#D04B18;
  --brass-dim:#E9B79A;
  --rivet:#EADBCB;
  --hair:rgba(208,75,24,.14);
  /* Status text, each on its own soft pill. The pill fills are a touch lighter than the
     spec's #E3F3EA / #FDF0D5, which gave only 4.39:1 and 4.43:1 for the small badge text. */
  --ok:#2E7D4F;     --ok-bg:#ECF7F0;
  --warn:#9A6400;   --warn-bg:#FEF5E2;
  --danger:#B3361F; --danger-bg:#FBE4DF;
  /* Status extras so no page needs a literal: --ok-text is success text that passes on glass
     (--ok is only 4.32:1 there); --ok-border rings success panels and icons; --ok-border-soft
     is the lighter ring on ok pills, flashes and toasts; --danger-border does the same for
     error pills; --danger-hover is the hover fill of a solid danger button. */
  --ok-text:#277045; --ok-border:#9CD3B1; --ok-border-soft:#CDE9D7;
  --danger-border:#F2C4BA; --danger-hover:#8F2A17;
  /* Glass and shape */
  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-solid:rgba(255,255,255,.94);
  --glass-blur:blur(14px) saturate(140%);
  --glass-border:rgba(255,255,255,.85);
  --glass-shadow:0 8px 24px rgba(120,60,20,.10);
  --shadow-soft:0 4px 14px rgba(120,60,20,.08);
  --shadow-lift:0 10px 28px rgba(120,60,20,.16);
  --radius-card:16px;
  --radius-input:12px;
  --radius-pill:999px;
  /* Type: all self-hosted through /fonts/fonts.css */
  --display:'Bebas Neue','Bebas Neue Fallback',sans-serif;
  --body:'Inter','Inter Fallback',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  color-scheme:light;
  accent-color:#D04B18;
  scrollbar-color:#E2C8B2 var(--deep);
}

/* 2. Base -------------------------------------------------------------- */
html{background:var(--obsidian);color-scheme:light}
/* isolation makes body a stacking context, so the z-index:-1 glow below paints
   above body's own background but under all content, even when a page gives
   body an opaque background. It does not change any containing block. */
body{background:var(--obsidian);color:var(--frost);isolation:isolate}
:where(a){color:var(--ember-text)}
:where(a:hover){color:var(--frost)}
::selection{background:#FBE3D6;color:var(--frost)}
:focus-visible{outline:2px solid #D04B18;outline-offset:2px}
:where(input,select,textarea,progress,meter){accent-color:#D04B18}
:where(code,kbd){font-family:var(--mono);font-size:.9em;background:var(--ember-dim);color:#8A2F0C;padding:.1em .35em;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--deep)}
::-webkit-scrollbar-thumb{background:#E2C8B2;border-radius:999px;border:2px solid var(--deep)}
::-webkit-scrollbar-thumb:hover{background:#D6B193}

/* 3. Glow backdrop ----------------------------------------------------- */
/* Two blurred blobs pinned to the viewport. Each pseudo-element covers exactly
   the viewport (inset:0) and draws its blob as a radial gradient inside it, so
   nothing extends past the right edge and no horizontal scroll can appear at
   320px. Fixed, behind content, and invisible to pointers and screen readers. */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
body::before{
  background:
    radial-gradient(circle at 88% 6%, #FFC79A 0, rgba(255,199,154,.55) 18%, rgba(255,199,154,0) 42%),
    radial-gradient(circle at 18% 38%, rgba(240,104,40,.08) 0, rgba(240,104,40,0) 30%);
  filter:blur(70px);
}
body::after{
  background:
    radial-gradient(circle at 10% 92%, #FFE3C2 0, rgba(255,227,194,.6) 20%, rgba(255,227,194,0) 45%),
    radial-gradient(circle at 78% 70%, rgba(255,199,154,.45) 0, rgba(255,199,154,0) 32%);
  filter:blur(80px);
}
/* Admin pages (t/, create/, giveaway/admin/: the only ones with header.top) get
   one soft blob behind the header and no second blob. Browsers without :has()
   just show the public glow. */
body:has(header.top)::before{
  background:radial-gradient(circle at 82% 0%, rgba(255,199,154,.75) 0, rgba(255,199,154,.3) 14%, rgba(255,199,154,0) 30%);
  filter:blur(70px);
}
body:has(header.top)::after{content:none}

/* 4. Glass ------------------------------------------------------------- */
/* .glass plus the shared wrappers that get it: storefront and home navs,
   admin header bars, toasts, the cookie banner, the command palette box, the
   csConfirm/csAlert/csPromptModal dialogs, and tooltip bubbles.
   ID-based components are matched with [id=...] to keep class-level specificity. */
.glass,
.shop-nav,
.nav,
header.top,
.toast,
.cc-activity-toast,
.cc-consent-bar,
[id="cc-cmdk-box"],
[id="csConfirmModal"] [role="alertdialog"],
[id="csAlertModal"] [role="alertdialog"],
[id="csPromptModal"] [role="alertdialog"],
.tip-bubble{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  color:var(--frost);
}
.glass,
.toast,
.cc-activity-toast,
[id="cc-cmdk-box"],
[id="csConfirmModal"] [role="alertdialog"],
[id="csAlertModal"] [role="alertdialog"],
[id="csPromptModal"] [role="alertdialog"]{border-radius:var(--radius-card)}
.tip-bubble{border-radius:12px}
.cc-consent-bar{border-width:1px 0 0;background:var(--glass-bg-solid)}
/* The cookie bar sits over scrolling page text, so it stays near-solid (one place; both footer copies inherit it). */
/* Overlay scrims behind the dialogs and the palette: a warm, light veil. */
[id="csConfirmModal"],
[id="csAlertModal"],
[id="csPromptModal"],
[id="cc-cmdk-backdrop"]{background:rgba(42,27,16,.28)}
/* No backdrop-filter (also old Safari with only the -webkit- prefix): near-solid white. */
@supports not (backdrop-filter: blur(1px)){
  .glass,
  .shop-nav,
  .nav,
  header.top,
  .toast,
  .cc-activity-toast,
  .cc-consent-bar,
  [id="cc-cmdk-box"],
  [id="csConfirmModal"] [role="alertdialog"],
  [id="csAlertModal"] [role="alertdialog"],
  [id="csPromptModal"] [role="alertdialog"],
  .tip-bubble{background:var(--glass-bg-solid)}
}
/* Reduced transparency: same near-solid fallback. */
@media (prefers-reduced-transparency: reduce){
  .glass,
  .shop-nav,
  .nav,
  header.top,
  .toast,
  .cc-activity-toast,
  .cc-consent-bar,
  [id="cc-cmdk-box"],
  [id="csConfirmModal"] [role="alertdialog"],
  [id="csAlertModal"] [role="alertdialog"],
  [id="csPromptModal"] [role="alertdialog"],
  .tip-bubble{background:var(--glass-bg-solid)}
}

/* 5. Shared components (existing class names) -------------------------- */
/* Buttons: pills. Plain .btn is the filled ember button, as in t/shop.php and index.html. */
.btn,
.btn-fire,
.btn-ghost,
.btn-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45em;
  padding:.62rem 1.25rem;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--body);
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn,
.btn.primary,
.btn-fire{background:var(--ember-btn);border-color:var(--ember-btn);color:var(--white)}
.btn:hover,
.btn-fire:hover,
.btn-ghost:hover,
.btn-danger:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn:hover,
.btn.primary:hover,
.btn-fire:hover{background:var(--ember-btn-hover);border-color:var(--ember-btn-hover);color:var(--white)}
.btn.ghost,
.btn-ghost{background:var(--ash);border-color:var(--ash-light);color:var(--frost)}
.btn.ghost:hover,
.btn-ghost:hover{background:var(--ash);border-color:var(--ember);color:var(--ember-text)}
.btn-danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:var(--white)}
.btn.small,
.btn-sm{padding:.4rem .85rem;font-size:13px}
.btn:disabled,
.btn-fire:disabled,
.btn-ghost:disabled,
.btn-danger:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* Badges: soft pills. */
.badge{display:inline-block;align-self:center;padding:2px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;background:var(--deep);border:1px solid var(--ash-light);color:var(--smoke)}
.badge.auto{background:var(--ok-bg);border-color:var(--ok-border-soft);color:var(--ok)}
.badge.out{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}

/* Form controls. :where() keeps specificity at zero so every page rule wins. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]),select,textarea){
  background:var(--ash);
  color:var(--frost);
  border:1px solid var(--ash-light);
  border-radius:var(--radius-input);
  padding:.6rem .8rem;
  font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
:where(input,select,textarea)::placeholder{color:var(--smoke);opacity:1}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]),select,textarea):focus{border-color:var(--ember);box-shadow:0 0 0 3px rgba(208,75,24,.14)}
:where(input:-webkit-autofill){-webkit-text-fill-color:var(--frost);box-shadow:0 0 0 100px var(--ash) inset}

/* Tables: solid white for readability (never glass). */
.tbl-scroll{overflow-x:auto;background:var(--ash);border:1px solid var(--ash-light);border-radius:var(--radius-card)}
.tbl{width:100%;border-collapse:collapse;background:var(--ash);color:var(--frost)}
.tbl th{background:var(--deep);color:var(--smoke);font-weight:600;text-align:left}
.tbl th,
.tbl td{padding:10px 12px;border-bottom:1px solid var(--ash-light)}
.tbl tr:last-child td{border-bottom:0}

/* Admin "i" tooltips. The bubble's glass comes from section 4. */
.field-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--ember-dim);color:var(--ember-text);font-size:10px;font-weight:700;cursor:help;vertical-align:middle}
.field-tip:hover,
.field-tip:focus-visible,
.field-tip.open{background:var(--ember-btn);color:var(--white)}
.field-tip .tip-bubble{display:none;position:absolute;left:0;bottom:calc(100% + 8px);width:max-content;max-width:300px;padding:10px 12px;font-size:.78rem;font-weight:400;line-height:1.5;text-align:left;z-index:50}
.field-tip:hover .tip-bubble,
.field-tip:focus-visible .tip-bubble,
.field-tip.open .tip-bubble{display:block}

/* 6. Reduced motion ---------------------------------------------------- */
/* Same blanket override the pages already use, plus the new hover lift and
   the glow layers. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  body::before,
  body::after{animation:none !important}
  .btn:hover,
  .btn-fire:hover,
  .btn-ghost:hover,
  .btn-danger:hover{transform:none !important}
}