/*
 * Neequa brand theme -- owned by the platform, loaded last on every
 * client-facing page (see render_brand_head() in shared/branding.php), so it
 * wins over base.css and over any accent color set through the backend.
 *
 * Palette originally sampled from a reference photo of pink disco tiles (the
 * photo is no longer in the repo); the deep berry is that photo's most
 * saturated tile, darkened until it clears WCAG AA for text on the blush
 * paper: 5.4:1.
 */
:root {
  --nq-plum: #3A1C28;
  --nq-wine: #7A2E47;
  --nq-berry: #A03A5B;
  --nq-hot: #B45A73;
  --nq-mauve: #AD6C7C;
  --nq-rose: #C392A2;
  --nq-petal: #E2CDD4;
  --nq-blush: #F1EAEA;
  --nq-pearl: #FAF2F0;
  --nq-glint: #E7E0BA;

  /* Tokens every client page already reads. */
  --ink: var(--nq-plum);
  --paper: var(--nq-blush);
  --panel: var(--nq-petal);
  --card: var(--nq-pearl);
  /* Contrast-checked (WCAG AA): muted text >= 4.5:1 and input borders
     >= 3:1 on blush, petal and pearl. */
  --muted: rgba(58, 28, 40, 0.72);
  --border-soft: #9E6275;
  --border: var(--nq-rose);
  --accent: var(--nq-berry);
  --error: #8E2A3F;

  /* Hero panel: light tiles, so "on-dark" text is plum. */
  --panel-dark: var(--nq-blush);
  --panel-dark-mid: var(--nq-petal);
  --panel-dark-accent: var(--nq-berry);
  --on-dark-ink: var(--nq-plum);
  /* >= 5.4:1 even over the darkest aura tile (with the veil below). */
  --on-dark-muted: rgba(58, 28, 40, 0.86);
  --on-dark-hairline: rgba(58, 28, 40, 0.28);
  --shadow-rgb: 58, 28, 40;
  --glow-rgb: 160, 58, 91;
  --card-frame: rgba(160, 58, 91, 0.28);

  /* Read by hero.js: five colours per palette, in the order
     deep fold, light, main, warm pop, soft. Each tap on the hero moves to the
     next palette (and wraps), so add or reorder sets here. */
  --aura-0: #D67DA0 #FAEDD4 #EBABC4 #F5D9BA #F2CCDB; /* blush and cream */
  --aura-1: #C2607F #F6DDE3 #D98BA5 #F2CBB6 #E8B4C8; /* berry */
  --aura-2: #D4A08A #FBF1DC #EBC3B0 #F3DFA8 #F0D3D3; /* rose gold */
  --aura-3: #A9718A #F1E4EA #C99AB0 #E7D0D8 #D9B5C6; /* mauve */
}

::selection {
  background: var(--nq-berry);
  color: var(--nq-pearl);
}

/* ---- Hero -------------------------------------------------------------- */

/* The aura (hero.js) draws over this. It is also what shows before the first
   frame and if WebGL is unavailable, so the panel is never empty and never a
   different picture. */
body .panel-dark {
  background: linear-gradient(160deg, #F2CCDB 0%, #EBABC4 45%, #FAEDD4 100%);
}

/* The 3D tile wall replaces the CSS fringe strands. */
#fringe-field {
  display: none;
}

.panel-dark > .hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y; /* taps reach the aura; vertical scroll stays native */
}

/* Frosted pearl behind the clock/brand text, so plum type stays legible on
   any tile. Sits above the canvas, below the content. */
.panel-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 14% 58%, rgba(250, 242, 240, 0.78), rgba(250, 242, 240, 0) 70%),
    linear-gradient(to bottom, rgba(250, 242, 240, 0.55), rgba(250, 242, 240, 0) 22%),
    /* Deeper and taller at the bottom so the weather row's small text
       stays >= 6:1 whichever tile passes behind it. */
    linear-gradient(to top, rgba(250, 242, 240, 0.85), rgba(250, 242, 240, 0) 40%);
}

/* ---- Below the hero ------------------------------------------------------ */

body .btn-primary {
  background: var(--nq-plum);
  color: var(--nq-pearl);
}

body .btn-primary:hover {
  background: var(--nq-wine);
}

body .content-brand-mark {
  background: var(--nq-plum);
  color: var(--nq-pearl);
}

body .scan-card {
  background: rgba(250, 242, 240, 0.55);
  border-color: rgba(255, 255, 255, 0.75);
}

/* The pale rose --border is 2.2:1 on blush -- too faint to show a
   button's edge. The deeper rose is 4:1. */
body .btn-secondary {
  border-color: var(--border-soft);
}

body .btn-secondary:hover {
  background: var(--nq-pearl);
}

/* Plain in-text links (e.g. "privacy policy" on check-in) would otherwise
   fall back to the browser's default blue. */
body a:not([class]) {
  color: var(--nq-berry);
}