/* ==========================================================================
   Instant Flame — design tokens and shared primitives

   THE one place the palette and the button system live. Every page loads this
   first, including the six standalone pages (admin37, admin-guide, arrive,
   rate, coming-soon, print/table-card) that carry their own <style> block and
   never load styles.css.

   Those pages each used to paste their own :root and their own .btn. That is
   how --radius came to be 14px on some pages and 16px on others, how six
   near-identical salmons all ended up meaning "something went wrong", and how
   one button grew four sizes and three different shadows. A value that more
   than one page needs goes here; a value genuinely local to one page (a print
   sheet's paper white, a kiosk's card width) stays in that page and gets a
   name that reads as local.
   ========================================================================== */

:root {
  /* ---------- ink & paper ---------- */
  --ink-deep: #0f0a07;      /* the surround either side of the 1200px column */
  --ink-black: #120c08;     /* below the page ground — footer, mobile drawer */
  --ink-dark: #17110d;      /* warm near-black — the page ground */
  --ink-dark-2: #1e1712;    /* raised dark panel */
  --ink-dark-3: #26201a;    /* a control sitting on a raised panel */
  --cream: #f7efe2;         /* warm paper */
  --cream-2: #fdf8f0;       /* lighter paper */
  --ink: #3a2b23;           /* body text on cream */
  --ink-mut: #6d5a4c;       /* muted text on cream */
  --cream-txt: #f3e7d7;     /* body text on dark */
  --cream-mut: #b9a894;     /* muted text on dark */

  /* ---------- flame ---------- */
  --brick: #8f2f2a;         /* deep maroon — headings on cream */
  --gold: #c9a66b;          /* hairlines and quiet accents */
  --orange: #f2933f;
  --red: #df5130;
  --ember: #c03327;
  --flame: linear-gradient(120deg, #f2933f 0%, #df5130 55%, #c03327 100%);

  /* ---------- the same colours as bare rgb triplets ----------
     A tint, a glow or a scrim is the palette colour at some alpha, and it
     should still say which colour it is. Write rgba(var(--red-rgb), .75), not
     a fresh triplet — the flame glow alone had drifted onto three different
     reds (223,81,48 / 207,64,40 / 192,51,39) doing one job.

     Alphas stay per-component on purpose here: unlike a hairline, a tint's
     strength is tuned to what it sits on. It is the colour that must not
     wander, not the opacity. */
  --ink-deep-rgb: 15, 10, 7;
  --ink-dark-rgb: 23, 17, 13;
  --brick-rgb: 143, 47, 42;
  --orange-rgb: 242, 147, 63;
  --red-rgb: 223, 81, 48;
  --ok-rgb: 125, 208, 163;
  --ok-solid-rgb: 90, 164, 105;
  --cream-txt-rgb: 243, 231, 215;
  --cream-mut-rgb: 185, 168, 148;
  --men-rgb: 74, 126, 168;
  --women-rgb: 179, 86, 127;

  /* ---------- hairlines ----------
     Gold at low alpha: the border on nearly every panel, card, table row and
     divider on the site. There were 19 distinct alphas of it; these are the
     five rungs they collapse onto. --line keeps its old .22, because four
     pages already reference it by that name and value.

     Pick by weight, not by component: faint for rows inside a panel, --line
     for the panel itself, mid for a divider that should read, strong for a
     card that should feel framed, bold for the frame-within-a-frame insets. */
  --line-faint: rgba(201, 166, 107, .14);
  --line: rgba(201, 166, 107, .22);
  --line-mid: rgba(201, 166, 107, .3);
  --line-strong: rgba(201, 166, 107, .45);
  --line-bold: rgba(201, 166, 107, .6);

  /* The same gold as a fill rather than a line — tinted surfaces, hover rows. */
  --gold-wash: rgba(201, 166, 107, .07);
  --gold-tint: rgba(201, 166, 107, .14);

  /* ---------- status ----------
     Warm enough to sit inside this palette instead of shouting standard-issue
     red and green at it. --warn says "this did not work" or "this is gone";
     --warn-soft is the reassuring note beside it. --ok is text on a dark
     ground, --ok-solid the same idea as a filled accent. */
  --warn: #ff9d7a;
  --warn-soft: #ffcaa8;
  --ok: #7dd0a3;
  --ok-solid: #5aa469;

  /* ---------- roster ----------
     Men and women in the admin views. Only the admin pages use these, but
     they are palette, and palette lives here. */
  --men: #4a7ea8;
  --women: #b3567f;

  /* ---------- geometry ----------
     Four rungs. CSS clamps a radius to half the box, so --radius-pill and a
     20px radius render identically on anything under 40px tall: badges take
     the pill, and --radius-lg is only for genuine full-page cards. */
  --radius-sm: 8px;         /* inputs, buttons, small panels */
  --radius: 14px;           /* cards */
  --radius-lg: 20px;        /* full-page cards, modals, login panels */
  --radius-pill: 999px;     /* badges, flags, pill buttons */
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, .55);

  /* ---------- breakpoints ----------
     A media query cannot read a custom property, so these are written out
     rather than tokenised. They are the four widths the whole site is allowed
     to break at; there were seven, including pairs 40px and 60px apart doing
     the same job in different files.

       400px  the narrowest phones — only where a row genuinely will not fit
       620px  phone: multi-column content goes to one column
       720px  the nav collapses to the drawer
       900px  tablet: the big editorial grids halve, then stack */
  /* The page is a fixed 1200px column: section backgrounds stop at its edges
     instead of bleeding to the window. --gutter is the breathing room inside
     it, so content sits at 1200 minus a gutter each side. */
  --shell: 1200px;
  --gutter: 40px;
}

/* An author `display` beats the UA stylesheet's [hidden] rule, which is how a
   `hidden` attribute silently stops working the moment some component sets its
   own display. Two pages and two components were each patching that locally.
   Settle it once, here, for everything. */
[hidden] { display: none !important; }

/* ==========================================================================
   BUTTONS

   One component, two postures. .btn on its own is the editorial button the
   public site uses: squared, uppercase, letterspaced — it is set like a
   caption. .btn.btn-pill is the same button on the screens people operate
   rather than read (admin, the door scanner, the rating page, the curtain):
   sentence case, rounded to a pill, sized for a thumb.

   Anything shared by both lives on .btn. If you find yourself redeclaring
   font-family or transition on a variant, it belongs up here instead.
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: "Lora", serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .82em 1.7em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 0;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease,
              color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }

/* ---------- shape ---------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .98rem;
  letter-spacing: 0;
  text-transform: none;
  padding: .72rem 1.5rem;
  border-radius: var(--radius-pill);
}

/* ---------- size ---------- */
.btn-lg { font-size: .9rem; padding: 1em 2.1em; }
/* The kiosk pages are read at arm's length on a phone propped on a table, so
   their large button is larger than the site's. */
.btn-pill.btn-lg { font-size: 1.18rem; padding: 1rem 1.5rem; }
.btn-block { width: 100%; }

/* ---------- colour ---------- */
.btn-flame {
  background: var(--flame);
  color: #fff;
  box-shadow: 0 12px 28px -12px rgba(var(--red-rgb), .75);
}
.btn-flame:hover { box-shadow: 0 16px 34px -12px rgba(var(--red-rgb), .9); }

.btn-dark { background: var(--ink-dark); color: var(--cream-txt); }
.btn-dark:hover { background: var(--ink-dark-3); }

.btn-outline-red {
  background: transparent;
  color: var(--brick);
  border: 1.5px solid var(--brick);
}
.btn-outline-red:hover { background: var(--brick); color: #fff; }

.btn-outline-cream {
  background: transparent;
  color: var(--cream-txt);
  border: 1.5px solid rgba(var(--cream-txt-rgb), .4);
}
.btn-outline-cream:hover { border-color: var(--orange); color: var(--orange); }

/* The dark-ground outline the app pages use. */
.btn-outline {
  background: transparent;
  color: var(--cream-txt);
  border: 1.5px solid var(--line);
}
.btn-outline:hover { border-color: var(--gold); color: #fff; }

/* Destructive, and it should read that way without shouting until hovered. */
.btn-danger {
  background: transparent;
  color: var(--warn);
  border: 1.5px solid rgba(var(--red-rgb), .4);
}
.btn-danger:hover { background: rgba(var(--red-rgb), .12); border-color: var(--red); color: var(--warn); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; transition: none; }
}