:root {
    /* Brand Colors */
    --primary-color: #4CAF50;
    --primary-color-rgb: 76, 175, 80;
    --primary-color-default: #4CAF50;
    --primary-color-hover: #45a049;
    --hover-color: #45a049;

    /* Semantic Colors */
    --secondary-color: #f5f7fa;
    --secondary-button-color: #64748b;
    --secondary-button-hover: #475569;
    --secondary-button-hover-border: #334155;
    --success-color: #28a745;
    --success-color-hover: #218838;
    --success-color-hover-border: #1e7e34;
    --danger-color: #dc3545;
    --danger-color-hover: #bb2d3b;
    --danger-color-hover-border: #b02a37;
    --warning-color: #ffc107;
    --info-color: #17a2b8;

    /* Surface & Text */
    --background-color: #f4f6f8;
    --card-bg: #ffffff;
    --light-color: #fafbfc;
    --text-color: #1f2937;
    --text-muted: #64748b;
    --border-color: #d9dee5;

    /* Table Tokens */
    --table-header-color: #4CAF50;
    --table-header-color-hover: #45a049;
    --table-row-hover: #ffffff;

    /* Typography */
    --font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Spacing & Layout */
    --border-radius: 10px;
    --transition-time: 0.2s;
    --box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --box-shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.06);

    /* Navbar specific variables */
    --navbar-width: 250px;
    --navbar-collapsed-width: 70px;
    --navbar-mobile-height: 60px;
    --navbar-padding: 15px;
    --navbar-link-padding: 10px 15px;
    --navbar-icon-width: 20px;
    --navbar-logo-height: 50px;
    --navbar-mobile-logo-height: 30px;
    --navbar-toggle-btn-size: 30px;
    --navbar-toggle-btn-offset: -15px;
    --navbar-z-index: 1000;
    --navbar-mobile-z-index: 1030;
    --navbar-overlay-z-index: 1010;
    --navbar-max-height: 50px;
}