/* ============================================================
   Find My Pit — "Sodium Night" design tokens
   Source: Figma "Find My Pit — Poster Wall Theme Study", 02 — Foundations
   Shared across every rebuilt page. Do not hardcode these values
   elsewhere — reference the variables below.
   ============================================================ */

:root {
  /* ---- Colour primitives ---- */
  --fmp-ink-1000: #0C0E0F;
  --fmp-graphite-900: #171B1D;
  --fmp-graphite-800: #22282B;
  --fmp-graphite-700: #30383C;
  --fmp-fog-500: #8C9691;
  --fmp-fog-300: #C9CEC9;
  --fmp-paper-100: #EBE7DE;
  --fmp-paper-050: #F7F3EA;
  --fmp-sodium-700: #8A5C17;
  --fmp-sodium-500: #D29A3A;
  --fmp-sodium-300: #E6BA66;
  --fmp-petrol-700: #25444E;
  --fmp-petrol-500: #315969;
  --fmp-petrol-300: #6A92A0;
  --fmp-signal-700: #762326;
  --fmp-signal-500: #A03032;
  --fmp-signal-300: #CF696B;
  --fmp-white-1000: #FFFFFF;
  --fmp-black-1000: #000000;

  /* ---- Semantic colour ---- */
  --color-bg-canvas: var(--fmp-graphite-900);
  --color-bg-surface: var(--fmp-graphite-800);
  --color-bg-surface-raised: var(--fmp-graphite-700);
  --color-bg-inverse: var(--fmp-paper-100);
  --color-bg-hover: var(--fmp-graphite-700);
  --color-bg-selected: var(--fmp-signal-500);
  --color-bg-action-primary: var(--fmp-signal-500);
  --color-bg-action-primary-hover: var(--fmp-signal-700);
  --color-bg-action-secondary: transparent;
  --color-bg-action-secondary-hover: var(--fmp-graphite-700);
  --color-bg-danger: var(--fmp-signal-700);
  --color-bg-danger-hover: var(--fmp-signal-500);
  --color-bg-disabled: var(--fmp-graphite-700);

  --color-text-primary: var(--fmp-paper-100);
  --color-text-secondary: var(--fmp-fog-300);
  --color-text-muted: var(--fmp-fog-500);
  --color-text-inverse: var(--fmp-ink-1000);
  --color-text-accent: var(--fmp-petrol-300);
  --color-text-link: var(--fmp-petrol-300);
  --color-text-danger: var(--fmp-signal-300);
  --color-text-disabled: var(--fmp-fog-500);

  --color-border-subtle: var(--fmp-graphite-700);
  --color-border-default: var(--fmp-fog-500);
  --color-border-strong: var(--fmp-paper-100);
  --color-border-accent: var(--fmp-petrol-300);
  --color-border-focus: var(--fmp-sodium-500);
  --color-border-danger: var(--fmp-signal-500);

  --color-icon-primary: var(--fmp-paper-100);
  --color-icon-secondary: var(--fmp-fog-300);
  --color-icon-inverse: var(--fmp-ink-1000);
  --color-icon-accent: var(--fmp-petrol-300);
  --color-icon-danger: var(--fmp-signal-500);

  /* ---- Gig status ---- */
  --status-sold-out-bg: var(--fmp-graphite-700);
  --status-sold-out-text: var(--fmp-fog-500);
  --status-tickets-bg: var(--fmp-petrol-700);
  --status-tickets-text: var(--fmp-petrol-300);
  --status-highlight-bg: var(--fmp-signal-700);
  --status-highlight-text: var(--fmp-signal-300);
  --status-neutral-bg: var(--fmp-graphite-700);
  --status-neutral-text: var(--fmp-fog-300);
  --status-free-bg: var(--fmp-petrol-700);
  --status-free-text: var(--fmp-petrol-300);

  /* ---- Type ---- */
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-data: 'IBM Plex Mono', 'Courier New', monospace;

  --text-display-hero-desktop: 700 64px/64px var(--font-display);
  --text-display-hero-mobile: 400 40px/42px var(--font-display);
  --text-display-page: 400 56px/58px var(--font-display);
  --text-display-section: 400 32px/36px var(--font-display);
  --text-display-card: 400 24px/30px var(--font-display);

  --text-body-large: 400 18px/28px var(--font-body);
  --text-body-base: 400 16px/24px var(--font-body);
  --text-body-small: 400 14px/20px var(--font-body);
  --text-body-strong: 600 16px/24px var(--font-body);

  --text-label-button: 600 14px/18px var(--font-body);
  --text-label-meta: 600 12px/16px var(--font-body);

  --text-data-large: 600 16px/20px var(--font-data);
  --text-data-base: 500 14px/20px var(--font-data);
  --text-data-small: 500 12px/16px var(--font-data);

  /* ---- Spacing (4px base) ---- */
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ---- Radii ---- */
  --radius-sharp: 0px;
  --radius-ticket: 2px;
  --radius-control: 4px;
  --radius-card: 8px;
  --radius-pill: 999px;

  /* ---- Touch targets ---- */
  --size-touch-min: 44px;
  --size-touch-comfort: 48px;
  --size-control-height: 48px;

  /* ---- Effects ---- */
  --effect-focus-sodium: 0 0 0 3px rgba(210, 154, 58, 0.48);
  --effect-lift-poster: 4px 4px 0px 0px rgba(12, 14, 15, 0.72);
}

/* Universal visibility utility — every page's JS toggles this class
   to show/hide status messages, dropdowns, and conditional sections. */
.hidden { display: none !important; }