:root {
  /* =====================================================
     Canyon Overhead Doors — Brand Palette
     ===================================================== */

  /* Color 1 — Gold / Accent */
  --color-1: #eaa621;
  --color-1-light: #ffff99;
  --color-1-lighter: #ffffe9;
  --color-1-dark: #d6920d;
  --color-1-darker: #b87a00;

  --color-1-transparent-1: rgba(234, 166, 33, 0.08);
  --color-1-transparent-2: rgba(234, 166, 33, 0.16);
  --color-1-transparent-3: rgba(234, 166, 33, 0.30);
  --color-1-transparent: var(--color-1-transparent-2);

  /* Color 2 — Navy / Dark */
  --color-2: #002858;
  --color-2-light: #64a0d0;
  --color-2-lighter: #b4f0ff;
  --color-2-dark: #001444;
  --color-2-darker: #000c2e;

  --color-2-transparent-1: rgba(0, 40, 88, 0.08);
  --color-2-transparent-2: rgba(0, 40, 88, 0.16);
  --color-2-transparent-3: rgba(0, 40, 88, 0.30);

  /* Color 3 — Warm Earth */
  --color-3: #5c3a1e;
  --color-3-light: #ac9470;
  --color-3-lighter: #fce4c0;
  --color-3-dark: #341c00;
  --color-3-darker: #200800;

  --color-3-transparent-1: rgba(92, 58, 30, 0.08);
  --color-3-transparent-2: rgba(92, 58, 30, 0.16);
  --color-3-transparent-3: rgba(92, 58, 30, 0.30);

  /* Color 4 — Tawny Brown */
  --color-4: #7a4e1a;
  --color-4-light: #d0ac7c;
  --color-4-lighter: #fffccc;
  --color-4-dark: #583404;
  --color-4-darker: #442000;

  --color-4-transparent-1: rgba(122, 78, 26, 0.08);
  --color-4-transparent-2: rgba(122, 78, 26, 0.16);
  --color-4-transparent-3: rgba(122, 78, 26, 0.30);

  /* =====================================================
     Semantic Aliases — Design System Tokens
     ===================================================== */

  /* Accent (gold) */
  --accent: var(--color-1);
  --accent-light: var(--color-1-light);
  --accent-dark: var(--color-1-dark);
  --accent-glow: var(--color-1-transparent-2);

  /* Dark surfaces (navy) */
  --dark: var(--color-2);
  --dark-deep: var(--color-2-dark);
  --dark-deeper: var(--color-2-darker);

  /* Neutral surfaces */
  --color-white: #ffffff;
  --color-off-white: #faf9f7;
  --color-cream: #f5f3ef;
  --color-border: rgba(0, 40, 88, 0.10);
  --color-border-light: rgba(255, 255, 255, 0.20);
  --color-muted: #8a94a6;
  --color-body-text: #2d3648;
  --color-heading: var(--color-2);

  /* Overlay */
  --overlay-dark: rgba(0, 20, 44, 0.72);
  --overlay-light: rgba(255, 255, 255, 0.80);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 20, 44, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 20, 44, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 20, 44, 0.10);
  --shadow-bloom: 0 4px 24px rgba(234, 166, 33, 0.30);
}