/* variables.css */

:root {
    /* Primary Colors */
    --primary-color: #05605b;
    --secondary-color: #e9b7b0;

    /* Text Colors */
    --text-color: #333;
    --text-light-color: #fafafa;
    --text-color-primary: #333;
    --text-color-secondary: #e9b7b0;

    /* Background Colors */
    --auth-color: #05605b;
    --background-color: #f4f7fa;
    --section-background-color: #ffffff;
    --background-light-color: rgba(255, 255, 255, 0.85);
    --hover-background-color: rgba(5, 96, 91, 0.1);
    --hover-color: #044c48;
    --link-background-color: rgba(5, 96, 91, 0.1);
    --stat-background-color: #f0f4f4;
    --stat-border-color: #e0e4e4;

    /* Button Colors */
    --btn-info-color: #17a2b8;
    --btn-info-hover-color: #138496;

    /* Border Colors */
    --border-color: rgba(5, 96, 91, 0.2);
    --border-focus-color: rgba(5, 96, 91, 0.25);
    --section-border-color: #007bff;

    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.12);
    --shadow-dark-color: rgba(0, 0, 0, 0.3);
    --shadow-color-light: rgba(0, 0, 0, 0.1);

    /* Toggler and Error Colors */
    --toggler-icon-color: rgba(5, 96, 91, 0.8);
    --error-color: #dc3545;
    /* Role-specific color */
    --sa-color: #FB3E3E;
    --store-color: #D5E1DA;
    --supplier-color: #fbdb3e;
    --supervisor-color: #0FC8FF;
}