:root {
  /* Brand colors (original designd8.com) */
  --color-default: #364d59;
  --color-primary: #feb900;
  --color-secondary: #52565e;

  /* Four service categories — one colour each */
  --cat-design: #e6a800;
  --cat-design-rgb: 230, 168, 0;
  --cat-design-soft: #fff6dc;
  --cat-materials: #2f7d6d;
  --cat-materials-rgb: 47, 125, 109;
  --cat-materials-soft: #e5f4f0;
  --cat-bedroom: #c17b6b;
  --cat-bedroom-rgb: 193, 123, 107;
  --cat-bedroom-soft: #f7ebe8;
  --cat-spalling: #5e7380;
  --cat-spalling-rgb: 94, 115, 128;
  --cat-spalling-soft: #e8eef2;

  /* Semantic mappings */
  --color-accent: var(--color-primary);
  --color-accent-dark: #e5a600;
  --color-dark: var(--color-default);
  --color-default-dark: #2a3d46;
  --color-text: var(--color-secondary);
  --color-text-light: #6f737a;
  --color-bg: #ffffff;
  --color-gray-light: #f4f4f4;
  --color-gray: #e0e0e0;
  --color-white: #ffffff;
  --font-body: 'Noto Sans TC', 'Roboto Condensed', sans-serif;
  --font-heading: 'Oswald', 'Noto Sans TC', sans-serif;
  --container-max: 1200px;
  --container-wide: 1400px;
  --header-height: 72px;
  --section-padding: clamp(3rem, 6vw, 5rem);
  --gap: 1.5rem;
  --radius: 4px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.1);
  --transition: 0.3s ease;
  --z-header: 1000;
  --z-mobile-menu: 9999;
  --z-back-top: 900;
}