/* --- CSS variables for the graphic charter --- */
:root {
    /* Main colors */
    --color-primary: #E0457B;   /* Default Fuchsia */
    --color-secondary: #8986CA; /* Default Lavender */
    --color-tertiary: #F2A365;  /* Default Light Orange */
    --color-brand: #5D4777;     /* Default Eggplant */

    /* RGB components for use with rgba() */
    --color-primary-rgb: 224, 69, 123;
    --color-secondary-rgb: 137, 134, 202;
    --color-brand-rgb: 93, 71, 119;
    --color-text-dark-rgb: 51, 51, 51;
    --color-text-light-rgb: 255, 255, 255;

    /* Text and background colors */
    --color-text-dark: #1a1a1a;
    --color-text-light: #fff;
    --color-text-medium: #555;
    --color-text-soft: #777;
    --color-background-white: #fff;
    --color-background-light: #f5f5f5;
    --color-background-dark: var(--color-brand);

    /* Border colors */
    --color-border-light: #eee;
    --color-border-medium: #ddd;

    /* Fonts */
    --font-body: 'Montserrat', sans-serif;
    --font-site-title: 'Fragment Mono', monospace;
    --font-site-description: 'Montserrat', sans-serif;
    --font-menu-script: 'Alex Brush', cursive;

    /* Variables for primary buttons */
    --button-primary-text-color: var(--color-primary);
    --button-primary-bg-color: transparent;
    --button-primary-border-color: var(--color-primary);
    --button-primary-text-hover-color: var(--color-text-light);
    --button-primary-bg-hover-color: var(--color-primary);
    --button-primary-border-hover-color: var(--color-primary);

    /* Variables for secondary buttons */
    --button-secondary-text-color: var(--color-text-light);
    --button-secondary-bg-color: transparent;
    --button-secondary-border-color: var(--color-border-light);
    --button-secondary-text-hover-color: var(--color-secondary); 
    --button-secondary-bg-hover-color: var(--color-background-light); 
    --button-secondary-border-hover-color: var(--color-secondary);
    --button-font-family: var(--font-body);

    /* Variables for tertiary buttons */
    --button-tertiary-text-color: var(--color-text-dark);
    --button-tertiary-bg-color: var(--color-tertiary);
    --button-tertiary-border-color: var(--color-tertiary);
    --button-tertiary-text-hover-color: var(--color-text-dark); 
    --button-tertiary-bg-hover-color: var(--color-brand); 
    --button-tertiary-border-hover-color: var(--color-brand);
    --button-font-family: var(--font-body);

    /* Box Shadows */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-strong-primary: 0 8px 20px rgba(var(--color-primary-rgb), 0.1);
}