/* ===================================================================
   DESIGN TOKENS — Campaign Complete Solutions
   Single source of truth for colors, typography, spacing, transitions
   =================================================================== */

:root {
    /* ── Brand Colors ─────────────────────────────────────────────── */
    --color-primary:          rgb(100, 32, 39);
    --color-primary-hex:      #642027;
    --color-primary-light:    rgba(100, 32, 39, 0.1);
    --color-primary-dark:     rgb(80, 25, 30);
    --color-secondary:        #b84a5a;
    --color-accent:           #ffc107;
    --color-accent-hover:     #e0a800;

    /* ── Gradient Presets ─────────────────────────────────────────── */
    --gradient-hero:          linear-gradient(120deg, rgba(100,32,39,0.92) 60%, rgba(184,74,90,0.85) 100%);
    --gradient-overlay:       linear-gradient(120deg, rgba(100,32,39,0.7) 60%, rgba(184,74,90,0.5) 100%);
    --gradient-section:       linear-gradient(120deg, #fff 60%, #f8d7da 100%);
    --gradient-section-alt:   linear-gradient(120deg, #fff 60%, #f8e6e9 100%);
    --gradient-cta:           linear-gradient(120deg, #642027 60%, #b84a5a 100%);
    --gradient-dark-overlay:  linear-gradient(120deg, rgba(30,10,20,0.78) 60%, rgba(100,32,39,0.38) 100%);
    --gradient-admin:         linear-gradient(135deg, #642027 60%, #b84a5a 100%);

    /* ── Text Colors ──────────────────────────────────────────────── */
    --color-text:             #333333;
    --color-text-muted:       #6c757d;
    --color-text-footer:      #7a5a5a;

    /* ── Background Colors ────────────────────────────────────────── */
    --color-bg:               #ffffff;
    --color-bg-light:         #f8f9fa;
    --color-bg-rose:          #f8e6e9;
    --color-bg-rose-light:    #f8d7da;
    --color-bg-focus:         #ffeaea;

    /* ── Border Colors ────────────────────────────────────────────── */
    --color-border:           #e6cfd2;
    --color-border-light:     #e0e0e0;
    --color-border-input:     #dee2e6;

    /* ── Typography ───────────────────────────────────────────────── */
    --font-primary:           'Segoe UI', Arial, sans-serif;
    --font-size-base:         1rem;
    --line-height-base:       1.6;

    /* ── Spacing ──────────────────────────────────────────────────── */
    --section-py:             5rem;
    --card-radius:            1.5rem;
    --btn-radius:             2rem;
    --navbar-height:          76px;
    --hero-min-height:        45vh;
    --hero-home-min-height:   80vh;

    /* ── Shadows ──────────────────────────────────────────────────── */
    --shadow-xs:              0 1px 4px rgba(100,32,39,0.06);
    --shadow-sm:              0 2px 8px rgba(100,32,39,0.04);
    --shadow-md:              0 1rem 3rem rgba(184,74,90,0.08);
    --shadow-lg:              0 1.5rem 3.5rem rgba(184,74,90,0.16);
    --shadow-hover:           0 2rem 4rem rgba(184,74,90,0.18);
    --shadow-icon:            0 0.5rem 1.5rem rgba(184,74,90,0.12);

    /* ── Transitions ──────────────────────────────────────────────── */
    --transition-base:        0.3s ease;
    --transition-bounce:      0.3s cubic-bezier(.4,2,.6,1);
    --transition-fast:        0.15s ease;
}