/**
 * Design Tokens & Visual Hierarchy
 * Hya Pro Artist Website
 * Museum-grade editorial minimalism inspired by contemporary architectural design systems.
 */

:root {
  /* Color Palette */
  --color-bg: #0c0c0e;
  --color-bg-secondary: #131316;
  --color-surface: #1a1a1f;
  --color-surface-hover: #22222a;
  --color-surface-border: #2a2a33;
  --color-border-light: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.04);

  --color-text-primary: #f5f4f0;
  --color-text-secondary: #b3b2ad;
  --color-text-muted: #7e7d78;
  --color-text-subtle: #575653;

  /* Accent & Warm Metallic */
  --color-accent: #c5a059;
  --color-accent-hover: #d8b46e;
  --color-accent-dim: rgba(197, 160, 89, 0.15);
  --color-accent-border: rgba(197, 160, 89, 0.3);

  /* Status Tokens */
  --status-available: #4ade80;
  --status-available-bg: rgba(74, 222, 128, 0.1);
  --status-private: #94a3b8;
  --status-private-bg: rgba(148, 163, 184, 0.1);
  --status-loan: #f59e0b;
  --status-loan-bg: rgba(245, 158, 11, 0.1);

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Monaco, monospace;

  /* Layout Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Container Boundaries */
  --max-width: 1400px;
  --max-width-narrow: 840px;
  --header-height: 68px;
  --filter-bar-height: 62px;
  --combined-header-height: 130px;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}