: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
     ===================================================== */
}