/* === CSS VARIABLES ===
   Single source of truth for every colour used in CSS *and* JS.
   Loaded on every page that needs the brand/canvas palette — currently
   the public site (via application.html.erb) and the backstage floor-plan
   editor (via edit_floor_plan.html.erb). Kept in its own file so admin
   pages can pull just the variables without inheriting the public site's
   body/section rules from application.css.

   JS reads brand and canvas tokens via getComputedStyle — see
   app/javascript/colors.js. Mailer/PWA-manifest colours stay inline
   because email clients and the manifest parser don't support
   CSS custom properties.

   How this is organised:
   • Brand palette         — the warm-pink + burgundy world the public site lives in.
   • Brand RGB triplets    — same brand colours expressed as channel triplets so we
                             can vary opacity inline (`rgb(var(--rgb-burgundy) / 0.4)`)
                             without minting a new token per alpha step.
   • Derived translucents  — alpha levels that recur often enough to deserve a name
                             (borders, scrollbars, popup overlays, base shadow).
   • Floor-plan canvas     — Konva fills/strokes for the booking + editor canvases.
                             Read in JS through colors.js.
   • Admin / neutral       — non-branded greys used by the Administrate panel and the
                             backstage floor-plan editor — kept distinct so the pink
                             tint of the public theme doesn't bleed into admin tools. */
:root {
  /* — Brand palette — */
  --color-bg:             #faf5f4;  /* page background, warm off-white */
  --color-pink:           #fce8e6;  /* primary pink surface */
  --color-surface:        #f5e3e1;  /* raised pink surface, slightly darker */
  --color-burgundy:       #a52216;  /* brand accent (text, CTAs, borders) */
  --color-burgundy-light: #c94535;  /* hover variant of brand */
  --color-text:           #1a1a1a;  /* body text */
  --color-text-muted:     #666666;  /* secondary text, captions */
  --color-white:          #ffffff;  /* pure white (menu card surface, table fill) */

  /* — Brand RGB triplets (use as `rgb(var(--rgb-X) / <alpha>)`) —
     These avoid an explosion of `--color-burgundy-12`, `--color-burgundy-40`, … tokens.
     Comment lists the hex equivalent for quick reference. */
  --rgb-burgundy:  165 34 22;     /* #a52216 */
  --rgb-pink:      252 232 230;   /* #fce8e6 */
  --rgb-bg:        250 245 244;   /* #faf5f4 */
  --rgb-text:      26 26 26;      /* #1a1a1a */
  --rgb-white:     255 255 255;
  --rgb-black:     0 0 0;

  /* — Derived translucents (recurring alpha levels worth naming) — */
  --color-border:           rgb(var(--rgb-burgundy) / 0.12);  /* hairline on pink panels */
  --color-scrollbar:        rgb(var(--rgb-burgundy) / 0.4);   /* scrollbar thumb on light bg */
  --color-scrollbar-hover:  rgb(var(--rgb-burgundy) / 0.7);
  --color-scrollbar-dark:        rgb(var(--rgb-pink) / 0.45); /* scrollbar thumb on dark sections */
  --color-scrollbar-dark-hover:  rgb(var(--rgb-pink) / 0.75);
  --color-popup-backdrop:   rgb(var(--rgb-text) / 0.62);      /* modal/overlay scrim */
  --color-overlay-deep:     rgba(8, 3, 3, 0.93);              /* near-black secret-menu overlay */
  --shadow-soft:            rgb(var(--rgb-black) / 0.1);      /* default section/panel shadow tone */

  /* — Floor-plan canvas (Konva, public booking + admin editor) —
     Mirrored into JS via app/javascript/colors.js; edit values here. */
  --color-canvas-bg:              #e7dcdb;  /* WebGL clear, slightly darker than --color-bg */
  --color-cloth-bg:               #fffdfb;  /* cloth-texture fill, slightly brighter than --color-bg */
  --color-table-fill:             #3fb15f;  /* available / bookable — green */
  --color-table-fill-disabled:    #b8b8b8;  /* unavailable for booking — gray */
  --color-table-fill-selected:    #ffd21f;  /* table chosen for booking — yellow */
  --color-table-fill-editor:      #fff7e0;  /* table fill in the admin editor (warmer to read against the white canvas) */
  --color-table-stroke:           #1f7a3d;  /* available outline — dark green */
  --color-table-stroke-disabled:  #6e6e6e;  /* unavailable outline — dark gray */
  --color-table-label-disabled:   #3d3d3d;  /* unavailable label */
  --color-table-fill-taken:       #d93b3b;  /* taken — red */
  --color-table-stroke-taken:     #8f1d1d;  /* taken outline — dark red */
  --color-table-label-taken:      #ffffff;  /* taken label — light for contrast on red */
  --color-table-border-editor:    #d8c97a;  /* editor banner border (companion to --color-table-fill-editor) */
  --canvas-bg-opacity:            0.8;      /* alpha for floor-plan background image (booking + editor) */

  /* — Admin / neutral greys (Administrate + floor-plan editor) —
     Kept separate from the brand greys so the admin chrome stays neutral. */
  --color-surface-neutral: #fafafa;  /* admin canvas / surface */
  --color-border-neutral:  #cccccc;  /* admin input/canvas border */
  --color-admin-hint:      #6b7280;  /* Administrate field hint */
  --color-admin-label:     #9ca3af;  /* Administrate group label */

  --font-mono: "Courier New", Courier, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "CormorantGaramond", Georgia, serif;

  --nav-height: 56px;
  --section-padding: clamp(3rem, 8vw, 6rem);
  --content-max-width: 960px;
}