/* ============================================================
   DRAPERY LIFE — theme.css
   WHITE-LABEL COLOR SYSTEM
   
   This file contains ALL color and brand visual tokens.
   To switch brand: update ONLY this file.
   All other CSS files reference these variables.
   
   Load order: theme.css → main.css → components.css → pages.css
   
   HOW TO CHANGE BRAND COLORS:
   1. Update the :root variables below
   2. Update --color-primary, --color-secondary, --color-accent
   3. All buttons, links, CTAs, and headings will update automatically
   4. Update --font-primary and --font-display for typography change
   5. Done — no other CSS files need editing
   ============================================================ */

/* ============================================================
   BRAND THEME — DRAPERY LIFE
   Primary: Warm Brown (#714D37)
   Secondary: Deep Brown (#7A4D34)
   Accent: Burgundy (#7A0013)
   Background: Ivory (#F4F1EB)
   ============================================================ */
:root {

  /* ----------------------------------------------------------
     PRIMARY BRAND COLORS
     Override these to change the brand.
     ---------------------------------------------------------- */
  --color-primary:        #714D37;   /* Primary — buttons, headings, CTAs */
  --color-primary-dark:   #5C3D2A;   /* Hover/active state */
  --color-primary-light:  #8B6349;   /* Focus rings, light accents */
  --color-primary-rgb:    113, 77, 55; /* For rgba() usage */

  --color-secondary:      #7A4D34;   /* Secondary brown */
  --color-secondary-dark: #633D28;
  --color-secondary-light:#926452;

  --color-accent:         #7A0013;   /* Accent — use sparingly for urgency */
  --color-accent-light:   #9B0019;   /* Hover for accent */
  --color-accent-dark:    #5E000F;

  /* ----------------------------------------------------------
     NEUTRALS — Keep consistent across brands
     ---------------------------------------------------------- */
  --color-ivory:          #F4F1EB;   /* Main page background */
  --color-sand:           #EAE3D8;   /* Card/section backgrounds */
  --color-sand-dark:      #D9CFC2;   /* Border emphasis */
  --color-sand-medium:    #E0D8CC;   /* Mid-tone neutral */
  --color-charcoal:       #2B2B2B;   /* Primary body text */
  --color-charcoal-soft:  #4A4A4A;   /* Secondary text */
  --color-muted:          #7A7A7A;   /* Placeholder, captions */
  --color-white:          #FFFFFF;
  --color-black:          #000000;

  /* ----------------------------------------------------------
     SEMANTIC COLORS — Status indicators
     ---------------------------------------------------------- */
  --color-success:        #2D6A4F;
  --color-success-bg:     #D8F3DC;
  --color-success-border: #B7E4C7;

  --color-warning:        #B5451B;
  --color-warning-bg:     #FDEBD0;
  --color-warning-border: #FAD5A5;

  --color-error:          #9B1C1C;
  --color-error-bg:       #FDE8E8;
  --color-error-border:   #FECACA;

  --color-info:           #1E4D78;
  --color-info-bg:        #E1EFFE;
  --color-info-border:    #BFDBFE;

  /* ----------------------------------------------------------
     COVERAGE STATUS COLORS
     ---------------------------------------------------------- */
  --color-coverage-ok:    #2D6A4F;   /* ZIP is covered */
  --color-coverage-ok-bg: #D8F3DC;
  --color-coverage-out:   #9B1C1C;   /* ZIP not covered */
  --color-coverage-out-bg:#FDE8E8;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Change font family here for brand switch
     ---------------------------------------------------------- */
  --font-primary:   'Inter', 'Montserrat', Arial, sans-serif;
  --font-display:   'Montserrat', 'Inter', Arial, sans-serif;
  --font-mono:      'Courier New', Courier, monospace;

  /* ----------------------------------------------------------
     BACKGROUND LAYERS
     ---------------------------------------------------------- */
  --bg-page:        var(--color-ivory);
  --bg-surface:     var(--color-white);
  --bg-muted:       var(--color-sand);
  --bg-dark:        var(--color-charcoal);
  --bg-primary:     var(--color-primary);

  /* ----------------------------------------------------------
     BORDER
     ---------------------------------------------------------- */
  --border-color:        var(--color-sand-dark);
  --border-color-light:  var(--color-sand);
  --border-color-focus:  var(--color-primary);
  --border-radius-sm:    4px;
  --border-radius:       8px;
  --border-radius-md:    12px;
  --border-radius-lg:    16px;
  --border-radius-xl:    24px;
  --border-radius-full:  9999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:   0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:   0 16px 40px rgba(0,0,0,0.12), 0 6px 12px rgba(0,0,0,0.06);
  --shadow-card: 0 2px 8px rgba(113,77,55,0.08), 0 1px 3px rgba(0,0,0,0.04);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --ease-out:         cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:      cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ----------------------------------------------------------
     Z-INDEX SCALE
     ---------------------------------------------------------- */
  --z-below:     -1;
  --z-base:       0;
  --z-elevated:  10;
  --z-sticky:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-toast:     400;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-max:    1200px;
  --container-pad:    clamp(1rem, 5vw, 2rem);
  --header-height:    64px;
}

/* ============================================================
   DARK MODE SUPPORT (future — opt-in per brand)
   Uncomment when needed for a specific brand.
   ============================================================ */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:       #1A1A1A;
    --bg-surface:    #242424;
    --color-charcoal:#F0EDE8;
    --border-color:  #3A3A3A;
  }
}
*/

/* ============================================================
   BRAND UTILITY CLASSES
   These depend on theme variables only.
   ============================================================ */

.text-primary    { color: var(--color-primary); }
.text-accent     { color: var(--color-accent); }
.text-muted      { color: var(--color-muted); }
.text-success    { color: var(--color-success); }
.text-error      { color: var(--color-error); }
.text-warning    { color: var(--color-warning); }

.bg-primary      { background-color: var(--color-primary); color: var(--color-white); }
.bg-ivory        { background-color: var(--color-ivory); }
.bg-sand         { background-color: var(--color-sand); }
.bg-dark         { background-color: var(--color-charcoal); color: var(--color-white); }

.border-primary  { border-color: var(--color-primary); }
.border-muted    { border-color: var(--border-color); }