/* CSS Variables - Color Palette & Theme */
:root {
    /* Theme Colors */
    --cl-hard: #26418f;
    --cl-medium: #5c6bc0;
    --cl-soft: #9999cc;
    --cl-softer: #dee1ed;
    --cl-super-soft: #f0f3fc;
    --cl-soft-background: #c5cae9;

    /* Accent Colors */
    --cl-green: #73bc56;
    --cl-yellow: #f6a623;
    --cl-red: #f44336;

    /* Grayscale */
    --white: #fff;
    --gray-lightest: #fafafa;
    --gray-lighter: #eee;
    --gray-smooth: #e0e0e0;
    --gray-light: #c8c8c8;
    --gray: #a4a4a4;
    --gray-dark: #6d6d6d;
    --gray-darker: #4a4a4a;
    --black: #000;

    /* State Colors */
    --color-success: var(--cl-hard);
    --color-info: var(--cl-hard);
    --color-warning: var(--cl-yellow);
    --color-error: var(--cl-red);
    --color-positive: var(--cl-green);
    --color-negative: var(--cl-red);

    /* Layout Dimensions */
    --toolbar-height: 64px;
    --permanent-drawer-width: 280px;
    --collapsible-drawer-closed-width: 56px;
    --content-container-max-width: 1562px;
    --content-padding-horizontal: 24px;
    --content-padding-horizontal-phone: 16px;
    --gap: 13px;              /* Base spacing unit from Athena */
    --gap-double: 26px;       /* Double base spacing from Athena */

    /* Breakpoints */
    --phone-max: 599px;
    --phone-landscape-max: 959px;
    --tablet-max: 1279px;
    --tablet-landscape-min: 960px;
    --desktop-min: 1280px;
}