/*------------------------------------*\
  #CSS CUSTOM PROPERTIES (DESIGN TOKENS)
  Base variables for Wx3/Dzaine brand.
  These define the shared color palette, typography, and spacing
  used across main.css and shared components.

  NOTE: Brand-specific theme files (store themes) should NOT
  use these variables - they have their own palettes.
\*------------------------------------*/

:root {
  /* ── Brand Colors ── */
  --color-primary:        #FF5E1D;
  --color-primary-dark:   #DB5616;
  --color-primary-darker: #ea4300;
  --color-primary-light:  #FFC7AA;
  --color-primary-bg:     #FF792E;

  /* ── Neutral Colors ── */
  --color-text:           #525252;
  --color-text-dark:      #000;
  --color-text-light:     #aeaeae;
  --color-text-muted:     #777;

  /* ── Background Colors ── */
  --color-bg-white:       #fff;
  --color-bg-light:       #ececec;
  --color-bg-light-alt:   #eaeaea;
  --color-bg-dark:        #202020;
  --color-bg-overlay:     #808080;

  /* ── Border Colors ── */
  --color-border:         #c0c0c0;
  --color-border-light:   #ccc;
  --color-border-dark:    #6c6c6c;

  /* ── Alert Colors ── */
  --color-alert-bg:       #ebebeb;
  --color-alert-border:   #6c6c6c;

  /* ── Social Media Colors ── */
  --color-facebook:       #3b5998;
  --color-instagram:      #c32aa3;
  --color-youtube:        #b31217;

  /* ── Typography ── */
  --font-family-base:     "Roboto", Arial, Verdana, sans-serif;
  --font-family-heading:  "Roboto";

  /* ── Spacing ── */
  --spacing-xs:           5px;
  --spacing-sm:           10px;
  --spacing-md:           15px;
  --spacing-lg:           20px;
  --spacing-xl:           25px;
  --spacing-2xl:          30px;
  --spacing-3xl:          40px;
  --spacing-4xl:          50px;
  --spacing-5xl:          80px;

  /* ── Layout ── */
  --content-width:        1200px;
  --content-width-tablet: 960px;
  --content-width-mobile: 640px;

  /*
   * ── Breakpoints (reference only, cannot use in @media) ──
   * Mobile:  max-width: 640px
   * Tablet:  max-width: 1199px
   * Desktop: min-width: 1200px
   */
}