/* Reservision design tokens (CP2, 2026-10-11): the brief + ChatGPT mockup (docs/design/) over the round-2 board.
   Three moods, one system: After Hours (dark: join, guest page), People's Club (ivory: host page),
   Cash Club (gold on money only). The six rules live in docs/design-tokens.md; a look change touches
   this file and that one, nothing else. Swapping a face is one line in section 1. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* 1. Type */
  /* Anton is a STAND-IN for the custom RESERVISION wordmark (brand mockup 10-11), not the final mark. */
  --font-wordmark: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-headline: "Anton", "Impact", "Arial Narrow", sans-serif;      /* condensed display: headlines, dates, money */
  --font-name: "Archivo Black", "Arial Black", sans-serif;            /* the host's name in the door-list box: wide, heavy */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-name);                                   /* round-2 name, kept for the board and the admin page */
  --display-tracking: -0.02em;
  --headline-tracking: 0.005em;
  --num: tabular-nums;

  /* 2. Colour: the palette */
  --black: #000000;
  --charcoal: #1A1A1A;
  --graphite: #333333;     /* 1 px field border on dark pages */
  --white: #FFFFFF;
  --ivory: #F8F5EE;        /* host page */
  --bone: #F5F3EC;         /* light surfaces: messages, fields on ivory */
  --off-white: #F4F1EA;    /* the list confirmation (Khalil's pick, C6) */
  --silver: #AAAAAA;       /* secondary text on dark */
  --stone: #5E5A55;        /* secondary text on light (silver is too faint on ivory) */
  --warm-grey: #D1CDC9;    /* rules, borders, dividers on light */
  --gold: #D4AF37;         /* money and milestones only, sparingly */
  --error: #9B1C1C;        /* error sentences only (form and API errors); never decoration */
  --night: #0E0E0E;        /* the host page and admin background in dark mode */
  --soot: #262626;         /* a raised or hovered surface in dark mode (one step above charcoal) */
  --ember: #FF7B72;        /* error sentences in dark mode: --error is unreadable on --night */
  --overlay: rgba(0, 0, 0, 0.72);   /* black at 72 %: the only gradient stop, where text sits on a photo */

  /* 2b. Colour: roles (pages read these) */
  --bg: var(--ivory);
  --text: var(--black);
  --surface: var(--bone);
  --muted: var(--stone);
  --rule: var(--warm-grey);
  --on-text: var(--white);           /* label on the black pill */
  --flood: var(--off-white);         /* the confirmation background */
  --on-flood: var(--black);
  --money: var(--gold);
  --dark-bg: var(--black);
  --dark-surface: var(--charcoal);
  --dark-text: var(--white);
  --dark-muted: var(--silver);
  --dark-rule: var(--graphite);
  --card: var(--white);              /* a card on the page: link card, sheet, result, date chip */
  --raised: var(--off-white);        /* a hovered row or menu item, the initials circle (admin) */
  --alert: var(--error);             /* the colour of an error sentence */
  --glow: rgba(0, 0, 0, 0.55);       /* the jump-chip highlight ring, the one glow (rule 6) */
  --glow-soft: rgba(0, 0, 0, 0.08);
  color-scheme: light;

  /* 3. Spacing */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 40px;
  --column: 480px;      /* desktop: a centred column, not a stretched phone */

  /* 4. Shape */
  --radius: 6px;        /* fields, sheets, cards */
  --radius-pill: 999px; /* every button */
  --rule-width: 1px;
  --outline-width: 1.5px;
  --box-width: 3px;     /* the door-list box, the signature */
  --tap: 44px;          /* the smallest tap target */
}

/* 5. Dark mode for the People's Club pages only: the host page (/h/<token>) and admin.
   <html data-theme="dark"> is set before paint by the inline script in each index.html, and only on
   those pages, so Join, the guest page, the confirmation and the landing keep their designed mood.
   Buttons invert (off-white pill, black type); gold stays on money only. */
:root[data-theme="dark"] {
  --bg: var(--night);
  --text: var(--off-white);
  --surface: var(--charcoal);
  --card: var(--charcoal);
  --raised: var(--soot);
  --muted: var(--silver);
  --rule: var(--graphite);
  --on-text: var(--black);
  --alert: var(--ember);
  --glow: rgba(244, 241, 234, 0.7);
  --glow-soft: rgba(244, 241, 234, 0.10);
  color-scheme: dark;
}