/* =============================================================
   root_variables.css — theme-INDEPENDENT design tokens.
   Loaded first everywhere (renderHead <link> + @import from
   style.css / sales_style.css — the dual load is deliberate).

   BREAKPOINT INVENTORY (CSS vars can't drive @media; this comment
   is the source of truth — new code should pick from these):
     360   quick-carousel narrow fallback
     480   sales table column hide · trivia 1-col options
     600   footer hide · trivia question-history sheet
     639   mobile bottom-nav ON / sidebar OFF (style.css)
     641–1007  tablet sidebar band (style.css)
     768   mobile gallery grid · guestbook/sales/trivia stacking
     810   download-gallery 1-col · JS no-hover threshold (≤810)
     900   search input narrow
     992   guestbook form/entries stack
     1079  mobile lightbox layout (lightbox.css)
     1400  download-gallery 2-col
   ============================================================= */

:root {
  /* =================================== */
  /* ========== GLOBAL SYSTEM ========== */
  /* =================================== */
  /* Theme-independent primitives only.                                 */
  /* All per-theme COLOURS now live in /css/themes.css, scoped by       */
  /* :root[data-theme="key"]. Do NOT add theme colours here.            */

  /* Layout Dimensions */
  --vinyl-w: 300px;
  --vinyl-h: var(--vinyl-w);
  --vinyl-w-2x: calc(var(--vinyl-w) / 2);
  --cass-w: calc(var(--vinyl-w) + var(--vinyl-w-2x));
  --cass-h: calc(var(--cass-w) / 1.5);

  /* Typography */
  --font-body: 'Amaranth', sans-serif;

  /* Font Sizes */
  --font-xs: 0.5rem;
  /* 8px */
  --font-sm: 0.625rem;
  /* 10px */
  --font-base: 0.75rem;
  /* 12px */
  --font-md: 0.875rem;
  /* 14px */
  --font-lg: 1rem;
  /* 16px */
  --font-xl: 1.125rem;
  /* 18px */
  --font-2xl: 1.25rem;
  /* 20px */
  --font-3xl: 1.5rem;
  /* 24px */
  --font-4xl: 2.25rem;
  /* 36px */

  /* Common Dimensions */
  --icon-sm: 15px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 30px;
  --icon-2xl: 36px;

  --image-bar-height: 40px;
  --border-width: 2px;
  --border-width-thin: 1px;
  --border-radius: 10px;

  --input-border-style: var(--border-width-thin) solid var(--border-colour);

  /* Common Spacing */
  --padding-xs: 2px;
  --padding-sm: 5px;
  --padding-md: 8px;
  --padding-lg: 10px;
  --padding-xl: 15px;
  --padding-2xl: 20px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index Layers — full stack map (highest wins):
     10003 --z-flag-modal    sales flag-auth modal
     10002 --z-flag-btn      sales lightbox flag button
     10001 quick-carousel handle (--qc-z + 1, quick-carousel.css)
     10000 --qc-z panel (quick-carousel.css) · release lightbox (lightbox.css)
      9999 --z-modal         video/trivia modals, sales lightbox, theme gear (inline PHP)
      9998 --z-modal-backdrop
      9001 --z-sidebar
      9000 --z-footer
      8000 --z-search
      5000 --z-sticky
      1000 --z-overlay */
  --z-overlay: 1000;
  --z-sticky: 5000;
  --z-search: 8000;
  --z-footer: 9000;
  --z-sidebar: 9001;
  --z-modal-backdrop: 9998;
  --z-modal: 9999;
  --z-flag-btn: 10002;
  --z-flag-modal: 10003;

  /* =================================== */
  /* ======== CORE PRIMITIVES ========== */
  /* =================================== */
  /* Themes redefine these too; kept here as a global fallback. */
  --black: rgba(0, 0, 0, 1);
  --white: rgba(255, 255, 255, 1);
  --transparent: rgba(0, 0, 0, 0);

  /* =================================== */
  /* ========== LYRICS MODULE ========== */
  /* =================================== */
  /* Singer colours are intentionally theme-independent. */
  --lyric_colour: rgba(241, 241, 241, 0.7);
  /* Default lyric text colour */
  --matt: rgb(41, 128, 185);
  /* Matt Skiba singer colour */
  --dan: rgb(231, 76, 60);
  /* Dan Andriano singer colour */
  --both: rgb(39, 174, 96);
  /* Both singers colour */
  --other: rgb(255, 255, 0);
  /* Other singer colour */
  --matt_shadow: rgba(41, 128, 185, 0.5);
  /* Matt text shadow */
  --dan_shadow: rgba(231, 76, 60, 0.5);
  /* Dan text shadow */
  --both_shadow: rgba(39, 174, 96, 0.5);
  /* Both text shadow */
  --other_shadow: rgba(255, 255, 0, 0.5);
  /* Other text shadow */

  /* =================================== */
  /* === THEME-SHARED DERIVED TOKENS === */
  /* =================================== */
  /* Identical across every theme, hoisted from themes.css. They resolve
     against the active theme's colour vars (e.g. --main-colour), so they
     stay theme-aware while living in one place. */
  --font-colour_black: var(--black);
  --font-colour_white: var(--white);
  --gallery-title_main: var(--main-colour);
  --link-colour_active: var(--font-colour_white);
  --link-colour_focus: var(--font-colour_offwhite);
  --sidebar-menu_icons: var(--font-colour_grey);
  --sidebar-menu_icons_active: var(--link-colour_active);
  --sidebar-menu_icons_focus: var(--link-colour_focus);
  --mobile-menu-icon-filter-pressed: brightness(0) invert(1);
}