/* Master Design System — All CSS Custom Properties

   One source of truth for colors, spacing, typography, animations, and breakpoints.
   All pages link this file, then component-specific CSS files reference these variables.

   Edit a value here, all pages update automatically.

   Scope: Dark/gold Material Design 3 theme ("The Unbuilt Archive")
   Live: 2026-09-18
*/

:root {
  /* ========== COLORS ========== */

  /* Material Design 3 Dark Theme - Surface & Text */
  --color-paper: #131315;           /* Primary background */
  --color-ink: #f5f2eb;             /* Primary text (Stitch warm bone) */
  --color-ink-secondary: #e5c158;   /* Secondary text (golden tone) */
  --color-grey: #a8a398;            /* Tertiary text, dividers (parchment ash) */
  --color-faint: #8a8168;           /* Hint text, disabled states */
  --color-rule: #4d4635;            /* Borders, dividers, placeholders */

  /* Accent & Interactive */
  --color-accent: #d4af37;          /* Gold - primary action color (museum gold) */
  --color-accent-highlight: #e5c158;  /* Gold highlight - high spotlight */
  --color-gold-alt: #d4af37;        /* Alternate gold for cards/components */
  --color-gold-light: #f2ca50;      /* Lighter gold for section headers */
  --color-hairline-gold: #c5a059;   /* Gilded brass for 1px borders (25-35% alpha) */
  --color-red: #ff6b6b;             /* Danger / composite warning */
  --color-loss: #ff8040;            /* Register of Loss badge / loss marker */

  /* Surface Variants */
  --color-surface-hover: #1d1c1f;   /* Slightly lighter surface for hover states */
  --color-surface-variant: #242327; /* Darker surface for skeleton loaders */
  --color-surface-dark: #171310;    /* Audio player background */

  /* Light Theme Button Colors (Legacy/Backwards Compatibility) */
  --color-button-bg-light: #f4efe6;    /* Light button background */
  --color-button-text-dark: #121214;   /* Dark text on light buttons */
  --color-button-hover-tan: #c5a059;   /* Tan hover state */

  /* Glass & Overlay Effects */
  --color-glass: rgba(19, 19, 21, 0.55);       /* Transparent overlay */
  --color-glass-solid: rgba(19, 19, 21, 0.86); /* Opaque overlay */
  --color-glass-edge: rgba(229, 225, 228, 0.14); /* Hairline borders */
  --color-glass-light: rgba(19, 19, 21, 0.62);   /* Semi-opaque background */
  --color-glass-light-solid: #131315;            /* Solid background from glass light */

  /* Text on Dark Backgrounds */
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-secondary: #a19d95;

  /* ========== SPACING ========== */

  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */

  /* Component-Specific Spacing */
  --navbar-padding-x: 16px;
  --navbar-padding-y: 0;
  --navbar-gap: 16px;
  --navbar-height: 56px;
  --navbar-height-scrolled: 40px;
  --navbar-border-width: 1px;

  --footer-padding-top: 80px;
  --footer-padding-bottom: 60px;

  /* ========== TYPOGRAPHY ========== */

  --font-family-primary: "Newsreader", Georgia, serif;
  --font-family-mono: "IBM Plex Mono", "JetBrains Mono", monospace;

  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.1em;

  /* ========== ANIMATIONS & TRANSITIONS ========== */

  /* Duration Tiers */
  --duration-instant: 0.01ms;    /* Reduced motion fallback */
  --duration-short: 120ms;       /* Quick feedback (color, icon) */
  --duration-medium: 150ms;      /* Standard interaction */
  --duration-long: 300ms;        /* Smooth, deliberate */
  --duration-extra-long: 500ms;  /* Entrance/exit animations */
  --duration-hero: 800ms;        /* Hero image reveals */

  /* Easing Curves */
  --easing-ease-out: cubic-bezier(0.4, 0, 0.2, 1);    /* Standard MD3 easing */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* Smooth, intentional */
  --easing-elastic: cubic-bezier(0.34, 1.56, 0.64, 1); /* Springy, premium */
  --easing-linear: linear;                             /* Never used (forbidden) */

  /* Animation Delays (Staggered Timing) */
  --delay-0: 0ms;
  --delay-1: 50ms;
  --delay-2: 100ms;
  --delay-3: 150ms;
  --delay-4: 200ms;
  --delay-5: 250ms;
  --delay-6: 300ms;

  /* Component-Specific Animation Values */
  --nav-drawer-open-delay: 600ms;        /* Delay before background fade starts */
  --nav-drawer-background-fade-duration: 400ms; /* Background opacity animation */
  --scroll-collapse-threshold: 100px;    /* Mobile navbar hide threshold */
  --scroll-collapse-duration: 300ms;     /* Hide/show animation duration */

  /* ========== BORDERS & OUTLINES ========== */

  --border-width-hairline: 1px;
  --border-width-thin: 2px;
  --border-radius-small: 2px;
  --border-radius-medium: 8px;
  --border-radius-large: 20px;
  --border-radius-full: 999px;

  /* ========== SHADOWS & EFFECTS ========== */

  --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-navbar: 0 2px 8px rgba(0, 0, 0, 0.2);

  --filter-brightness: brightness(0.94);
  --filter-contrast: contrast(1.03);
  --filter-grayscale: grayscale(30%);

  /* ========== BREAKPOINTS ========== */

  --breakpoint-mobile: 375px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-large: 1440px;

  /* ========== Z-INDEX STACK ========== */
  /* Managed hierarchy: lower = behind, higher = on top */

  /* Backgrounds & Negative Space */
  --z-background-far: -2;      /* Ambient effects, deep backgrounds */
  --z-background: -1;          /* Page backgrounds */

  /* Base Content Layer */
  --z-base: 0;                 /* Default/normal flow */
  --z-content: 1;              /* Standard content, components */
  --z-content-raised: 2;       /* Slightly raised content */
  --z-content-high: 3;         /* Highest content layer */

  /* Sticky & Fixed Elements */
  --z-sticky: 10;              /* Sticky headers, footers */
  --z-sticky-high: 20;         /* High sticky elements */

  /* Interactive Overlays */
  --z-dropdown: 40;            /* Dropdowns, popovers */
  --z-popover: 50;             /* Floating panels */

  /* Navigation System */
  --z-navbar: 100;             /* Main navbar (fixed, on top) */
  --z-navbar-enhancement: 100; /* Navbar enhancements (same level as navbar) */

  /* Drawer System */
  --z-drawer-backdrop: 105;    /* Drawer scrim backdrop (above navbar) */
  --z-drawer-panel: 110;       /* Navigation drawer panel (highest drawer layer) */
  --z-drawer-content: 111;     /* Content inside drawer (top of drawer stack) */

  /* Backdrop & Modal System */
  --z-modal-backdrop: 250;     /* Modal scrim backdrop */
  --z-modal: 300;              /* Modal dialogs, panels */
  --z-tooltip: 200;            /* Tooltips (below modals, above most) */

  /* High-Priority Overlays */
  --z-viewer: 1000;            /* Image viewer, lightbox */
  --z-command-palette: 1001;   /* Command palette, search overlay */

  /* System Overlays (Effects, Animations) */
  --z-effect-low: 998;         /* Ambient effects background */
  --z-effect-high: 999;        /* Top-level effects/filters */
  --z-loading-overlay: 9997;   /* Loading states */
  --z-notification: 9998;      /* Toast notifications, alerts */
  --z-dialog: 9999;            /* System dialogs (highest except system) */
  --z-system: 10000;           /* Absolute top (use sparingly) */
}

/* Reduced Motion Preference - Instant animations */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01ms;
    --duration-short: 0.01ms;
    --duration-medium: 0.01ms;
    --duration-long: 0.01ms;
    --duration-extra-long: 0.01ms;
    --duration-hero: 0.01ms;
  }
}

/* ========== MUSEUM ARCHIVAL DESIGN EFFECTS ========== */
/* Stitch design enhancements: spotlighting, tactile matting, film grain, waypoints */

/* Museum Spotlighting — Warm 3000K halo around primary elements */
.museum-spotlight {
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.museum-spotlight-subtle {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.04);
}

.museum-spotlight-hover:hover {
  box-shadow: 0 0 50px rgba(212, 175, 55, 0.12), 0 12px 32px rgba(0, 0, 0, 0.5);
  transition: box-shadow var(--duration-long) var(--easing-standard);
}

/* Tactile Matting — Inset shadow for embossed depth */
.tactile-matting {
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.95);
}

.tactile-matting-light {
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Reticle Grid Background — Subtle archival texture */
.reticle-grid {
  background-image:
    linear-gradient(to right, rgba(212, 175, 55, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

.reticle-grid-dense {
  background-size: 16px 16px;
  background-image:
    linear-gradient(to right, rgba(212, 175, 55, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212, 175, 55, 0.05) 1px, transparent 1px);
}

/* Film Grain Vignette — Cinematic gallery atmosphere */
.film-grain-vignette {
  background: radial-gradient(circle at center, transparent 30%, rgba(10, 10, 12, 0.5) 95%);
  pointer-events: none;
}

.film-grain-vignette-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 35%, rgba(10, 10, 12, 0.88) 95%);
  pointer-events: none;
  z-index: var(--z-effect-low);
}

/* Reveal Animations — Staggered entrance with elastic easing */
.reveal-elem {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-extra-long) var(--easing-elastic),
              transform var(--duration-extra-long) var(--easing-elastic);
  will-change: opacity, transform;
}

.reveal-elem.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity var(--duration-long) var(--easing-standard);
}

.reveal-fade.is-visible {
  opacity: 1;
}

.reveal-slide-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity var(--duration-extra-long) var(--easing-elastic),
              transform var(--duration-extra-long) var(--easing-elastic);
}

.reveal-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-slide-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity var(--duration-extra-long) var(--easing-elastic),
              transform var(--duration-extra-long) var(--easing-elastic);
}

.reveal-slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Butterfly Mark Enhancement — Glow & hover effects */
.butterfly-mark {
  filter: drop-shadow(0 0 8px rgba(255, 87, 8, 0.4));
  transition: transform var(--duration-long) var(--easing-standard),
              filter var(--duration-long) var(--easing-standard);
}

.butterfly-mark:hover {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 0 16px rgba(255, 87, 8, 0.8));
}

/* Waypoint Navigation — Scroll-spy sidebar (desktop only) */
.waypoint-rail {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

@media (min-width: 1280px) {
  .waypoint-rail {
    display: flex;
  }
}

.waypoint-container {
  background: rgba(19, 19, 21, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(77, 70, 53, 0.8);
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  space-y: 10px;
}

.waypoint-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  transition: color var(--duration-medium) var(--easing-standard);
  text-decoration: none;
  font-size: 11px;
  font-family: var(--font-family-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.waypoint-link.active {
  color: var(--color-accent);
}

.waypoint-link:hover {
  color: var(--color-accent-highlight);
}

.waypoint-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-rule);
  transition: width var(--duration-medium) var(--easing-standard),
              background var(--duration-medium) var(--easing-standard),
              box-shadow var(--duration-medium) var(--easing-standard);
}

.waypoint-link.active .waypoint-dot {
  background: var(--color-accent);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.4),
              inset 0 0 4px rgba(212, 175, 55, 0.3);
}

.waypoint-link:hover .waypoint-dot {
  background: var(--color-accent-highlight);
  width: 12px;
}

/* Typography Enhancements — Generous tracking and old-style figures */
.label-tracked {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-family-primary);
  font-size: 11px;
  font-weight: 500;
}

.label-tracked-wider {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: var(--font-family-primary);
  font-size: 10px;
  font-weight: 600;
}

.tabular-figures {
  font-variant-numeric: tabular-nums;
}

/* Barcode Line Animation — Interactive bar scaling */
.barcode-line {
  transition: height var(--duration-long) var(--easing-elastic),
              background-color var(--duration-short) var(--easing-standard);
  transform-origin: bottom;
}

.barcode-line:hover {
  transform: scaleY(1.08);
}

/* Asymmetric Balance Grid — Off-center layout for vitrine presentations */
.asymmetric-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
}

@media (max-width: 1024px) {
  .asymmetric-grid {
    grid-template-columns: 1fr;
  }
}

/* Hairline Framing — Delicate 1px gold borders */
.hairline-frame {
  border: 1px solid rgba(197, 160, 89, 0.3);
  transition: border-color var(--duration-medium) var(--easing-standard);
}

.hairline-frame:hover {
  border-color: rgba(197, 160, 89, 0.6);
}

.hairline-frame-strong {
  border: 1px solid rgba(197, 160, 89, 0.5);
}

.hairline-divider {
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(197, 160, 89, 0.3) 10%,
    rgba(197, 160, 89, 0.3) 90%,
    transparent 100%);
}

/* Respects reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-elem,
  .reveal-fade,
  .reveal-slide-left,
  .reveal-slide-right,
  .butterfly-mark,
  .museum-spotlight-hover:hover,
  .waypoint-dot {
    transition: none !important;
    animation: none !important;
  }

  .reveal-elem,
  .reveal-fade,
  .reveal-slide-left,
  .reveal-slide-right {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Footer wrapper alignment — responsive padding to match main content */
#footer-container > div {
  max-width: 1360px;
  margin: 0 auto;
}

#footer-container footer {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

@media (min-width: 768px) {
  #footer-container footer {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (min-width: 1024px) {
  #footer-container footer {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   AA Contrast Fixes — WCAG Compliance
   Target: 4.5:1 normal text, 3:1 large text (18pt+)
   ───────────────────────────────────────────────────────────────── */

/* text-outline-variant: boost from 2.06:1 → ~5:1 */
.text-outline-variant {
  color: #c9b89f !important;
}

/* text-secondary: boost hover from 4.1:1 → ~4.8:1 */
a:hover.text-secondary,
a[class*="text-secondary"]:hover {
  color: #f2ca50 !important;
}

/* text-secondary base state: boost from dim gold to brighter */
.text-secondary {
  color: #e5c158 !important;
}

/* nav-drawer-copyright: boost from 4.27:1 → ~4.7:1 */
.nav-drawer-copyright {
  color: #d4b896 !important;
}

/* span.font-serif (watermark text): boost from 1.05:1 → ~3:1
   Used for "THE MUSEUM THAT NEVER EXISTED" in footer */
span.font-serif {
  color: #8b7f6f !important;
}

/* span.stamp (COMPOSITE badge): boost from 1.84:1 → 4.5:1+ */
span.stamp {
  color: #e6c875 !important;
}

/* ─────────────────────────────────────────────────────────────────
   Tap Target Sizing — WCAG 2.5.8 Compliance (44×44px minimum)
   ───────────────────────────────────────────────────────────────── */

/* link-inline: add minimum height for touch accessibility */
a.link-inline {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
}

/* General links: ensure minimum height with padding */
a:not(.app-bar-logo):not([class*="btn"]):not([class*="button"]) {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Skip Link — Keyboard Navigation */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 8px 16px;
  background-color: var(--color-accent);
  color: var(--color-paper);
  text-decoration: none;
  font-weight: 600;
  border-radius: 2px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  outline: 3px solid var(--color-paper);
  outline-offset: 2px;
}

/* Loss: the one colour with one job. Loss, destruction, works gone for good
   (Register of Loss figures, "500–1,000 works missing", a record's Destroyed
   status). A muted oxide, 5.2:1 on the dark ground; not used for anything else. */
:root{ --color-loss:#C86F60; }
.loss-mark{ color:var(--color-loss) }

/* pigment:start (generated by tools/generators/gen-pigment.py from config/catalog.json; do not edit) */
:root{
  --pigment-strip: linear-gradient(90deg, #2b2a28 0.00% 13.91%, #eeebe3 13.91% 27.81%, #c0282d 27.81% 40.70%, #e3c23a 40.70% 48.54%, #2f5ea8 48.54% 56.08%, #8a8782 56.08% 60.99%, #3f8a4a 60.99% 65.71%, #9fb4c9 65.71% 70.33%, #c08a2e 70.33% 74.77%, #b9bcbf 74.77% 79.09%, #c9a23a 79.09% 83.36%, #e6dcc3 83.36% 87.59%, #e0762b 87.59% 91.48%, #7a4f2d 91.48% 94.02%, #2fa7a0 94.02% 95.96%, #e58fae 95.96% 97.50%, #b8307d 97.50% 98.93%, #6b3f8f 98.93% 99.44%, #2a3db0 99.44% 99.83%, #e2472b 99.83% 100.00%);
}
/* pigment:end */