@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

:root {
    /*=============================================
    =            Color Palette                    =
    =============================================*/
    --brand-primary: #001c37;
    --brand-secondary: #1d77b9;
    --brand-accent: #f15a22;
    --white-color: #ffffff;
    --black-color: #000000;

    --grey-light: #e0e0e0;
    --grey-lightest: #f0f0f0;
    --grey-lightest-color: var(--grey-lightest);

    --error-color: #fca5a5;
    --error-background-color: #fef2f2;
    --error-text-color: #991b1b;

    --success-color: #ddffdd;

    --warning-color: #f99d1c;


    /*=============================================
    =            Typography                       =
    =============================================*/
    --font-family-sans-serif: 'Rubik', sans-serif;
    --text-color: var(--brand-primary);
    --text-color-light: #99a7b5;
    --text-color-medium: #667b8f;
    --text-color-disabled: #ccd3d9;
    --text-color-darkest: #2f3542;

    /*=============================================
    =            Components                       =
    =============================================*/

    /*----------  Button  ----------*/
    --button-light-background: rgba(255, 255, 255, 0.4);
    --button-light-border: rgba(255, 255, 255, 0.5);
    --button-light-box-shadow: rgba(0, 0, 0, 0.1);
    --button-light-background-hover: rgba(255, 255, 255, 0.55);
    --button-focus-box-shadow: var(--button-light-border);
    --button-disabled-background: #d5d5d5;
    --button-primary-background-color: var(--brand-primary);
    --button-primary-background-color-dark: #001122;
    --button-primary-focus-ring-color: #1a2f4a;
    --button-danger-background-color: var(--brand-accent);
    --button-danger-background-color-dark: #c1481b;
    --button-danger-focus-ring-color: #f48a5f;
    --button-info-background-color: var(--brand-accent);


    /*----------  i6  ----------*/
    --i6-fullscreen-image-box-shadow-color: rgba(0, 0, 0, 0.08);
    --i6signal-menu-hover-background-color: rgba(var(--brand-accent-rgb), 0.1);
    --i6signal-content-images-box-shadow-color: rgba(0, 0, 0, 0.08);


    /*----------  Layout  ----------*/
    --layout-aside-box-shadow-color: rgba(0, 0, 0, 0.2);
    --layout-overlay-background-color: rgba(0, 0, 0, 0.5);
    --layout-box-shadow-color: rgba(0, 0, 0, 0.08);
    --layout-aside-background-color: #f6faff;

    /*----------  Table  ----------*/
    --table-error-background-color: #ffdddd;
    --table-queued-background-color: #fffacd;
    --table-step-background-color: #e0f2f7;
    --table-success-background-color: #ddffdd;
    --table-box-shadow-color: rgba(0, 0, 0, 0.07);
    --table-header-background-color: var(--brand-primary);
    --table-row-active-text-color: var(--brand-primary);
    --table-row-active-background-color: #e9f0ff;

    /*----------  Chat  ----------*/
    --chat-message-box-shadow-color: rgba(0, 0, 0, 0.05);
    --signal-chat-user-message-background-color: var(--brand-secondary);
    --signal-chat-menu-link-hover-color: var(--brand-accent);
    --signal-chat-send-button-background-color: var(--brand-accent);

    /*----------  Card  ----------*/
    --widget-recforyou-hlist-card-background-color: rgba(255, 255, 255, 0.82);
    --widget-recforyou-hlist-card-border-color: #e9e9e9;
    --widget-recforyou-hlist-card-box-shadow-color: #c4c4c482;
    --home-card-link-hover-background-color: #165a8d;

    /*----------  Navigation  ----------*/
    --nav-active-color: #f97316;
    --nav-active-background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(58, 123, 200, 0.08) 50%, rgba(30, 74, 148, 0.08) 100%);

    /*----------  Header  ----------*/
    --header-border-color: rgba(255, 255, 255, 0.08);
    --header-box-shadow-color: rgba(0, 12, 24, 0.25);
    --header-pill-background: rgba(255, 255, 255, 0.08);
    --header-pill-border-color: rgba(255, 255, 255, 0.14);
    --header-item-hover-background: rgba(255, 255, 255, 0.16);

    /*----------  User  ----------*/
    --user-avatar-background-color: #fed7aa;
    --user-avatar-color: #c2410c;
    --user-avatar-box-shadow-color: rgb(255 255 255 / .5);

    /*----------  Dropdown  ----------*/
    --dropdown-details-summary-background: linear-gradient(to right, rgba(249, 115, 22, 0.1) 0%, transparent 100%);
    --dropdown-details-summary-hover-background: rgba(249, 115, 22, 0.07);
    --summary-title-color: #9ca3af;
    --summary-value-color: #374151;
    --dropdown-details-content-box-shadow-color: var(--button-light-box-shadow);
    --dropdown-details-content-border-color: var(--grey-light);
    --dropdown-details-item-hover-background: rgba(249, 115, 22, 0.08);
    --dropdown-details-divider-color: rgba(0, 28, 55, 0.08);

    /*----------  Token screens  ----------*/
    --token-box-created-accent: #16a34a;
    --token-box-created-border: #bbf7d0;
    --token-box-created-background: #f0fdf4;
    --token-box-deleted-accent: var(--brand-accent);
    --token-box-deleted-border: #fed7aa;
    --token-box-deleted-background: #fff7ed;
    --token-btn-danger-hover-background: rgba(241, 90, 34, 0.08);

    /*----------  Dialog  ----------*/
    --confirmation-dialog-box-shadow-color: rgba(0, 0, 0, 0.2);
    --confirmation-dialog-backdrop-background-color: rgba(0, 0, 0, 0.6);
    --confirmation-btn-ok-background-color: #28a745;
    --confirmation-btn-ok-hover-background-color: #218838;
    --confirmation-btn-cancel-background-color: #6c757d;
    --confirmation-btn-cancel-hover-background-color: #5a6268;

    /*----------  Form  ----------*/
    --textarea-border-color: #ccc;
    --textarea-background-color: #f8f8f8;
    --form-legend-color: #333;
    --form-label-color: #444;
    --form-input-border-color: #ddd;
    --form-input-focus-border-color: #007bff;
    --form-input-focus-box-shadow-color: rgba(0, 123, 255, 0.25);

    /*----------  Big Message  ----------*/
    --bigmsg-dialog-border-color: #f91c1c;
    --bigmsg-dialog-backdrop-background-color: rgb(255 132 132 / 60%);
    --bigmsg-btn-hover-background-color: #0056b3;

    /*----------  Signal Wizard  ----------*/
    --signal-wizard-menu-link-hover-color: var(--brand-accent);
    --signal-wizard-menu-link-active-background-color: var(--brand-accent);
    --signal-wizard-nav-button-background-color: var(--brand-accent);

    /*----------  Pipelines  ----------*/
    --pipeline-action-background-color: var(--brand-accent);
    --pipeline-refresh-button-background-color: var(--brand-accent);
    --pipeline-refresh-button-hover-background-color: #c1481b;

    /*----------  Misc  ----------*/
    --fullscreen-overlay-background-color: rgba(0, 0, 0, 0.8);
    --background-color-light: var(--brand-off-white);
    --background-color-light-2: #f2f2f2;
    --warning-text-color: var(--brand-yellow);
    --widget-preview-error-border-color: #fd2828;
    --background-color-home: #f0f4f8;
    --grey-light-color: #e0e0e0;
    /* layers are painted first-on-top, so the translucent glows must come before the opaque base */
    --primary-gradient:
        radial-gradient(at left top, rgba(249, 115, 22, 0.25) 0%, transparent 50%),
        radial-gradient(at right bottom, rgba(58, 123, 200, 0.15) 0%, transparent 60%),
        linear-gradient(135deg, rgb(15, 31, 54) 0%, rgb(30, 74, 148) 50%, rgb(15, 31, 54) 100%);

}