:root {
  /* ==========================================
     Early 1800s Urban Planning — Design System
     Inspired by architectural blueprints, aged
     parchment, wax seals, and gilded cartography
     ========================================== */

  /* Parchment palette — aged, warm, rich */
  --bg-primary: #f0e6d0;
  --bg-secondary: #e4d8c0;
  --bg-tertiary: #d6c8ad;
  --bg-dark: #1e1610;
  --bg-darker: #140e09;
  --bg-card: #faf5ea;
  --bg-card-hover: #f5eedf;
  --bg-parchment-light: #fdf8f0;

  /* Text — deep inks and aged tones */
  --text-primary: #1a1008;
  --text-secondary: #4a3828;
  --text-muted: #7a6548;
  --text-inverse: #f0e6d0;
  --text-heading: #2c1a0e;

  /* Borders & accents — gilded, architectural */
  --border-color: #8a7458;
  --border-light: #c4b08a;
  --border-dark: #5a4030;
  --border-ornate: #9a8260;
  --accent-gold: #b8860b;
  --accent-gold-light: #d4a520;
  --accent-gold-dark: #8b6914;
  --accent-copper: #b87333;
  --accent-bronze: #a67c52;
  --accent-burgundy: #722f37;
  --accent-navy: #1a3a5c;
  --divider: #d0c0a0;

  /* Tile colors — richer, more period-appropriate */
  --tile-shop: #c49a17;
  --tile-shop-bg: #fdf3d0;
  --tile-shop-border: #a07814;
  --tile-factory: #5a5a5a;
  --tile-factory-bg: #e8e4de;
  --tile-factory-border: #3a3a3a;
  --tile-tavern: #a83025;
  --tile-tavern-bg: #fbe5e2;
  --tile-tavern-border: #862420;
  --tile-office: #1e5a8a;
  --tile-office-bg: #dce8f4;
  --tile-office-border: #144a72;
  --tile-park: #1a7040;
  --tile-park-bg: #d8f0e0;
  --tile-park-border: #105030;
  --tile-house: #8a4422;
  --tile-house-bg: #f4e0cc;
  --tile-house-border: #6a3018;

  /* Functional colors */
  --success: #2a8a50;
  --warning: #d4960e;
  --error: #c43030;
  --info: #1e5a8a;

  /* Typography — period-appropriate serif faces */
  --font-heading: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Libre Baskerville', 'Georgia', serif;
  --font-ui: 'Libre Baskerville', 'Georgia', serif;
  --font-display: 'Playfair Display', 'Georgia', serif;

  /* Spacing — generous, stately */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border radius — subtle, architectural */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Shadows — rich, warm, layered */
  --shadow-sm: 0 1px 3px rgba(26, 16, 8, 0.1), 0 1px 2px rgba(26, 16, 8, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 16, 8, 0.12), 0 2px 4px rgba(26, 16, 8, 0.08);
  --shadow-lg: 0 10px 30px rgba(26, 16, 8, 0.16), 0 4px 8px rgba(26, 16, 8, 0.1);
  --shadow-xl: 0 20px 50px rgba(26, 16, 8, 0.2), 0 8px 16px rgba(26, 16, 8, 0.12);
  --shadow-inset: inset 0 2px 6px rgba(26, 16, 8, 0.1);
  --shadow-emboss: inset 0 1px 0 rgba(255, 248, 230, 0.3), 0 2px 4px rgba(26, 16, 8, 0.15);
  --shadow-gold: 0 4px 16px rgba(184, 134, 11, 0.2);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --nav-width: 76px;
  --nav-height-mobile: 68px;
  --content-max-width: 1100px;
  --grid-cell-size: 80px;

  /* Decorative */
  --ornament-opacity: 0.12;
  --parchment-texture: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}