@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    /* ===== Brand Colors ===== */
    --color-primary: #1b6ec2;
    --color-primary-border: #1861ac;
    --color-primary-link: #0071c1;
    --color-accent: #598087;
    --color-accent-shadow: rgb(59 128 135 / 50%);
    --vera-yellow: rgb(252, 198, 90);

    /* ===== Text Colors ===== */
    --color-text: #1a1a1a;
    --color-text-inverse: #fafafa;
    --color-text-tab-faded: #5980876e;

    /* ===== Background Colors ===== */
    --color-background: #fafafa;
    --color-surface: #f8f9fa;
    --color-surface-alt: #f3f5f7;

    /* ===== Validation Colors ===== */
    --color-text-error: #C51A1B;
    --color-error-bg: #b32121;
    --color-error-ui-bg: lightyellow;
    --color-valid: #26b050;
    --color-invalid: #f9777f;
    --color-danger: #dc3545;

    /* ===== Border Colors ===== */
    --color-border: #dee2e6;
    --color-border-focus: #598087;

    /* ===== Loading Indicator ===== */
    --color-loading-track: #e0e0e0;

    /* ===== Shadows ===== */
    --shadow-error-ui: 0 -1px 2px rgba(0, 0, 0, 0.2);
    --shadow-focus: 0 0 0 0.25rem var(--color-accent-shadow);

    /* ===== Z-index Scale ===== */
    --z-error-ui: 1000;
    --z-validation-popup: 1998;
    --z-sticky-buttons: 2001;

    /* ===== Layout ===== */
    --ampol-form-row-padding-block: 5px;
    --sidebar-footer-height: 40px;

    /* ===== Spacing ===== */
    --spacing-0: 0;

    --spacing-1: 0.25rem; /* 3.5px  */
    --spacing-2: 0.5rem; /* 7px    */
    --spacing-3: 0.75rem; /* 10.5px */
    --spacing-4: 1rem; /* 14px   */
    --spacing-5: 1.25rem; /* 17.5px */
    --spacing-6: 1.5rem; /* 21px   */
    --spacing-8: 2rem; /* 28px   */
    --spacing-10: 2.5rem; /* 35px   */
    --spacing-12: 3rem; /* 42px   */

    --spacing-16: 4rem; /* 56px   */
    --spacing-20: 5rem; /* 70px   */
    --spacing-24: 6rem; /* 84px   */
    --spacing-32: 8rem; /* 112px  */

    /* ===== Font Sizes ===== */
    --font-size-base: 1rem; /* 14px */

    /* ===== Font Weights ===== */
    --font-weight-normal: 400;

    /* ===== Transitions ===== */
    --transition-fast: 150ms ease;

    /* ===== Status Colors (badges) ===== */
    --color-status-ongoing: #107477;
    --color-status-cancelled: #F8D7DA;
    --color-status-closed: #bdde9e;
    --color-status-inactive: #dab8c4;
    --color-status-aftercare: #FBD6B4;
    --color-status-refrain: #CED4DA;
    --color-status-intermission: #EBABB1;
    --color-status-neutral: #6c757d;
    --color-status-booked: #b1e3ee;

    /* ===== Tree Component Colors ===== */
    --color-accent-faded: rgba(89, 128, 135, 0.41); /* #59808769 */

    --color-tree-category-1: #ffc3c3;
    --color-tree-category-2: #fbffc3;
    --color-tree-category-3: #d7ffc3;
    --color-tree-category-4: #cbcbcb;
    --color-tree-category-5: #a9a9a9;
    --color-tree-category-6: #909090;

    --color-tree-important: #5AA36A;
}

html, body {
    font-size: 14px;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--color-primary-link);
}