/* ============================================
   NEWSLETTER BUILDER - DESIGN SYSTEM
   ============================================
   Customize all colors, fonts, spacing, shadows,
   and design tokens here to match your brand.
   ============================================ */

:root {
    /* ========== COLOR PALETTE ========== */
    
    /* Primary Colors - Main brand colors */
    --color-fill-dark-blue: #011C32;
    --color-fill-yellow: #FAD701;
    --color-fill-white: #FFFFFF;
    --color-fill-light-blue: #0C3251;
    --color-fill-green: #4AA331;
    --color-fill-red: #A00303;
    --color-fill-grey: #EDF3F7;
    --color-fill-disabled: #3D6A8F;
    --color-fill-brand: #035CA7;
    
    /* Border Colors */
    --color-border-light: #e0e0e0;
    --color-border-medium: #ccc;
    --color-border-dark: #999;
    --color-border-focus: #007bff;
    
    /* Background Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f5f5;
    --color-bg-tertiary: #fafafa;
    
    /* Surface Colors */
    --color-surface: #ffffff;
    --color-surface-alt: #f8f9fa;
    
    /* Text Colors */
    --color-text-primary: #333333;
    --color-text-secondary: #6c757d;
    --color-text-muted: #999999;
    --color-text-inverse: #ffffff;
    
    /* ========== TYPOGRAPHY ========== */
    
    /* Font Families */
    --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'Courier New', Courier, monospace;
    
    /* Font Sizes */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* ========== SPACING ========== */
    
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;
    
    /* ========== BORDERS ========== */
    
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    
    --border-radius-sm: 3px;
    --border-radius-md: 4px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    --border-radius-full: 50%;
    
    /* ========== SHADOWS ========== */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 10px 20px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    
    /* ========== TRANSITIONS ========== */
    
    --transition-fast: 0.1s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* ========== Z-INDEX SCALE ========== */
    
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    
    /* ========== COMPONENT SPECIFIC ========== */
    
    /* Sidebar */
    --sidebar-width: 280px;
    --sidebar-bg: var(--color-fill-dark-blue);
    --sidebar-border: var(--color-border-light);
    
    /* Preview Area */
    --preview-bg: var(--color-bg-tertiary);
    --preview-content-width: 600px;
    
    /* Buttons */
    --button-padding-y: 10px;
    --button-padding-x: 16px;
    --button-border-radius: var(--border-radius-md);
    --button-font-size: var(--font-size-base);
    --button-font-weight: var(--font-weight-medium);
    
    /* Input Fields */
    --input-padding-y: 8px;
    --input-padding-x: 12px;
    --input-border-radius: var(--border-radius-md);
    --input-border-color: var(--color-border-medium);
    --input-focus-border: var(--color-border-focus);
    
    /* Toolbar */
    --toolbar-gap: 8px;
    --toolbar-item-size: 26px;
    
    /* Content Blocks */
    --block-padding: 15px;
    --block-border: var(--color-border-light);
}

/* ========== DARK MODE SUPPORT (Optional) ========== */
/* Uncomment and customize if you want dark mode */

/*
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg-primary: #1a1a1a;
        --color-bg-secondary: #2d2d2d;
        --color-surface: #2d2d2d;
        --color-text-primary: #ffffff;
        --color-text-secondary: #b0b0b0;
        --color-border-light: #404040;
    }
}
*/

/* ========== CUSTOM BRAND OVERRIDES ========== */
/* Add your brand-specific overrides below */

/*
Example: If you want to use your brand colors:

:root {
    --color-primary: #YOUR_PRIMARY_COLOR;
    --color-primary-hover: #YOUR_PRIMARY_HOVER;
    --font-family-primary: 'Your Custom Font', sans-serif;
}
*/