/**
 * Classic Theme - CSS Variables
 * The original malewitch.com design with warm earth tones
 * Version: 1.0
 * Created: 2025-10-13
 */

:root {
    /* ========================================================================
       Primary Brand Colors
       ======================================================================== */
    --color-primary: #543d2b;           /* Warm brown - main brand color */
    --color-primary-dark: #281f13;      /* Darker brown for hover states */
    --color-primary-light: #6b5142;     /* Lighter brown for accents */

    --color-secondary: #8b4513;         /* Saddle brown - secondary accent */
    --color-accent: #daa520;            /* Goldenrod - highlights */

    /* ========================================================================
       Background Colors
       ======================================================================== */
    --color-bg-body: #ffffff;           /* Main page background */
    --color-bg-light: #eeeeee;          /* Light gray backgrounds */
    --color-bg-lighter: #f5f5dc;        /* Beige/cream for panels */
    --color-bg-dark: #e0e0e0;           /* Darker gray for cards */

    /* ========================================================================
       Text Colors
       ======================================================================== */
    --color-text-primary: #333333;      /* Main text color */
    --color-text-secondary: #555555;    /* Secondary text */
    --color-text-light: #ffffff;        /* Light text on dark backgrounds */
    --color-text-muted: #999999;        /* Muted/disabled text */
    --color-text-error: #ff0000;        /* Error messages */

    /* ========================================================================
       Interactive Elements
       ======================================================================== */
    --color-link: #543d2b;              /* Link color (matches primary) */
    --color-link-hover: #281f13;        /* Link hover state */

    --color-button-primary: #543d2b;    /* Primary button background */
    --color-button-primary-hover: #281f13;
    --color-button-primary-text: #ffffff;

    --color-button-success: #22b24c;    /* Success/green button */
    --color-button-success-hover: #287916;
    --color-button-success-text: #ffffff;

    --color-button-secondary: #666666;  /* Secondary/gray button */
    --color-button-secondary-hover: #2b2b2b;
    --color-button-secondary-text: #ffffff;

    /* ========================================================================
       Borders & Dividers
       ======================================================================== */
    --color-border: #cccccc;            /* Default border color */
    --color-border-light: #eeeeee;      /* Light borders */
    --color-border-dark: #999999;       /* Dark borders */

    /* ========================================================================
       Status Colors
       ======================================================================== */
    --color-success: #22b24c;           /* Success states */
    --color-warning: #fffacd;           /* Warning backgrounds */
    --color-warning-text: #000000;      /* Warning text */
    --color-danger: #ff0000;            /* Danger/error states */
    --color-info: #6B8E23;              /* Info messages (olive green) */

    /* ========================================================================
       Typography
       ======================================================================== */
    --font-family-primary: Georgia, 'Times New Roman', serif;
    --font-family-secondary: Arial, Helvetica, sans-serif;
    --font-family-monospace: 'Courier New', Courier, monospace;

    --font-size-base: 14px;
    --font-size-large: 18px;
    --font-size-small: 12px;
    --font-size-heading-1: 32px;
    --font-size-heading-2: 28px;
    --font-size-heading-3: 24px;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --line-height-base: 1.6;
    --line-height-heading: 1.2;

    /* ========================================================================
       Spacing
       ======================================================================== */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;

    /* ========================================================================
       Layout
       ======================================================================== */
    --container-max-width: 1200px;
    --sidebar-width: 250px;

    --border-radius-sm: 3px;
    --border-radius-md: 5px;
    --border-radius-lg: 10px;

    /* ========================================================================
       Shadows
       ======================================================================== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.2);

    /* ========================================================================
       Transitions
       ======================================================================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ========================================================================
       Header/Banner
       ======================================================================== */
    --header-bg-color: var(--color-primary);
    --header-text-color: var(--color-text-light);
    --header-height: 150px;

    /* Calls banner (olive green) */
    --calls-banner-bg: #6B8E23;
    --calls-banner-text: #ffffff;
}

/* ========================================================================
   Dark Mode Support (Optional - for future use)
   ======================================================================== */
@media (prefers-color-scheme: dark) {
    /*
     * Classic theme doesn't have a dark mode variant yet
     * This is a placeholder for future implementation
     */
}

/* ========================================================================
   Print Styles
   ======================================================================== */
@media print {
    :root {
        --color-bg-body: #ffffff;
        --color-text-primary: #000000;
        /* Simplify colors for printing */
    }
}