/* webroot/css/base/variables.css */
:root {
    /* Brand colors - Green/Purple/Black theme */
    --primary: #2E7D32;         /* Forest Green - Primary brand color */
    --primary-dark: #1B5E20;    /* Dark Green - Darker shade for hover states */
    --primary-light: #E8F5E9;   /* Light Green - Background for highlighted elements */

    --secondary: #673AB7;       /* Deep Purple - Secondary brand color */
    --secondary-dark: #4A148C;  /* Dark Purple - Darker shade for hover states */
    --secondary-light: #EDE7F6; /* Light Purple - Background for secondary elements */

    --accent: #9C27B0;          /* Purple - Accent color for highlights */

    --success: #43A047;         /* Green - Success messages and indicators */
    --warning: #FFA000;         /* Amber - Warning messages */
    --danger: #D32F2F;          /* Red - Error messages and destructive actions */
    --info: #0288D1;            /* Light Blue - Informational elements */

    --light: #F5F5F5;           /* Off-white - Light backgrounds */
    --dark: #212121;            /* Almost Black - Text and dark UI elements */
    --white: #FFFFFF;           /* Pure White - For contrast elements */
    --gray: #757575;            /* Medium Gray - For subtle text */
    --gray-light: #BDBDBD;      /* Light Gray - For borders and dividers */
    --gray-dark: #424242;       /* Dark Gray - For secondary text */

    /* Font families */
    --font-primary: "Nunito", "Helvetica Neue", Arial, sans-serif;
    --font-secondary: "Lora", Georgia, serif;

    /* Component sizes */
    --border-radius: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-sm: 0.25rem;
    --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --transition-speed: 0.3s;
}