/* ========================================
   POLLAROO ADMIN - GLOBAL COLOR SYSTEM
   Centralized color definitions for consistency
   ======================================== */

:root {
    /* ====> Brand Colors <==== */
    --pollaroo-yellow: #DAFF00;
    --pollaroo-yellow-dark: #c9ef00;
    --pollaroo-yellow-darker: #b8df00;
    --pollaroo-yellow-alpha-08: rgba(218, 255, 0, 0.08);
    --pollaroo-yellow-alpha-12: rgba(218, 255, 0, 0.12);
    --pollaroo-yellow-alpha-15: rgba(218, 255, 0, 0.15);
    --pollaroo-yellow-alpha-25: rgba(218, 255, 0, 0.25);
    --pollaroo-yellow-alpha-35: rgba(218, 255, 0, 0.35);

    /* ====> Surface Colors (Dark Theme) <==== */
    --surface-primary: #1e2124;
    --surface-secondary: #2d3235;
    --surface-tertiary: #3a3f44;
    --surface-hover: #4a5058;
    --surface-dark: #1a1d20; /* Darker surface for gradients and backgrounds */
    --surface-input: #343a40; /* Input focus background */

    /* ====> Text Colors <==== */
    --text-primary: #ffffff;
    --text-secondary: #e9ecef;
    --text-tertiary: #adb5bd;
    --text-disabled: #6c757d;
    --text-on-primary: #1a1d20; /* Text color when on yellow background */

    /* ====> Semantic Colors <==== */
    --success: #4caf50;
    --success-dark: #388e3c;
    --success-alpha-12: rgba(76, 175, 80, 0.12);
    --success-alpha-15: rgba(76, 175, 80, 0.15);

    --warning: #ff9800;
    --warning-dark: #f57c00;
    --warning-alpha-12: rgba(255, 152, 0, 0.12);
    --warning-alpha-15: rgba(255, 152, 0, 0.15);

    --error: #f44336;
    --error-dark: #d32f2f;
    --error-light: #ff6b6b; /* Lighter error for text/alerts */
    --error-alpha-10: rgba(244, 67, 54, 0.1);
    --error-alpha-12: rgba(244, 67, 54, 0.12);
    --error-alpha-15: rgba(244, 67, 54, 0.15);

    --info: #2196f3;
    --info-dark: #1976d2;
    --info-alpha-15: rgba(33, 150, 243, 0.15);

    /* ====> Border & Divider <==== */
    --border-color: #444;
    --border-input: #3a3f44; /* Input border color */
    --border-input-error: rgba(244, 67, 54, 0.3); /* Error border color */
    --divider-color: rgba(255, 255, 255, 0.12);

    /* ====> Shadows <==== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.5);

    /* ====> Border Radius <==== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ====> Transitions <==== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}