/*
|--------------------------------------------------------------------------
| AlertHub Brand Foundation
|--------------------------------------------------------------------------
|
| BlackBerry Secure Communications visual system.
|
*/

:root {
    /*
    |--------------------------------------------------------------------------
    | Official brand colours
    |--------------------------------------------------------------------------
    */

    --bb-admiral: #001f3f;
    --bb-admiral-80: #334c65;
    --bb-admiral-60: #66798c;
    --bb-admiral-40: #99a5b2;
    --bb-admiral-20: #ccd2d9;

    --bb-slatestone: #5a789a;
    --bb-slatestone-80: #7b93ae;
    --bb-slatestone-60: #9caec2;
    --bb-slatestone-40: #bdc9d7;
    --bb-slatestone-20: #dee4eb;

    --bb-argent: #c3c3c3;
    --bb-argent-80: #cfcfcf;
    --bb-argent-60: #dbdbdb;
    --bb-argent-40: #e7e7e7;
    --bb-argent-20: #f3f3f3;

    --bb-regalia: #b89d53;
    --bb-regalia-80: #c6b175;
    --bb-regalia-60: #d4c498;
    --bb-regalia-40: #e3d8ba;
    --bb-regalia-20: #f1ebdd;

    --bb-white: #ffffff;
    --bb-black: #000000;

    /*
    |--------------------------------------------------------------------------
    | Application semantic colours
    |--------------------------------------------------------------------------
    */

    --ah-primary: var(--bb-admiral);
    --ah-primary-hover: var(--bb-admiral-80);
    --ah-secondary: var(--bb-slatestone);
    --ah-secondary-hover: var(--bb-slatestone-80);
    --ah-accent: var(--bb-regalia);

    --ah-page-background: #f5f7fa;
    --ah-surface: var(--bb-white);
    --ah-surface-muted: var(--bb-argent-20);

    --ah-text-primary: var(--bb-admiral);
    --ah-text-secondary: #4b5563;
    --ah-text-muted: #6b7280;
    --ah-text-on-dark: var(--bb-white);

    --ah-border: var(--bb-argent-60);
    --ah-border-light: var(--bb-argent-40);

    --ah-success: #198754;
    --ah-warning: #9a6b00;
    --ah-danger: #b42318;
    --ah-info: var(--bb-slatestone);

    /*
    |--------------------------------------------------------------------------
    | Layout and component values
    |--------------------------------------------------------------------------
    */

    --ah-radius-sm: 0.375rem;
    --ah-radius-md: 0.625rem;
    --ah-radius-lg: 0.875rem;

    --ah-shadow-sm:
        0 1px 3px rgba(0, 31, 63, 0.08);

    --ah-shadow-md:
        0 6px 18px rgba(0, 31, 63, 0.10);

    --ah-shadow-lg:
        0 16px 32px rgba(0, 31, 63, 0.14);

    --ah-transition:
        160ms ease-in-out;
}

/*
|--------------------------------------------------------------------------
| Base typography
|--------------------------------------------------------------------------
*/

html {
    font-size: 16px;
}

body {
    margin: 0;
    background-color: var(--ah-page-background);
    color: var(--ah-text-secondary);
    font-family:
        "Open Sans",
        "Segoe UI",
        Arial,
        sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--ah-text-primary);
    font-family:
        "Open Sans",
        "Segoe UI",
        Arial,
        sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: clamp(1.75rem, 2vw, 2.25rem);
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.1rem;
}

p {
    margin-top: 0;
}

a {
    color: var(--ah-primary);
    text-decoration-color: rgba(0, 31, 63, 0.35);
    text-underline-offset: 0.15em;
    transition:
        color var(--ah-transition),
        text-decoration-color var(--ah-transition);
}

a:hover {
    color: var(--ah-secondary);
    text-decoration-color: currentColor;
}

small,
.text-muted {
    color: var(--ah-text-muted) !important;
}

/*
|--------------------------------------------------------------------------
| Selection and focus
|--------------------------------------------------------------------------
*/

::selection {
    background: var(--bb-slatestone-40);
    color: var(--bb-admiral);
}

:focus-visible {
    outline: 3px solid rgba(90, 120, 154, 0.45);
    outline-offset: 2px;
}

.ah-session-timeout {
    background: #fff8e6;
    border: 1px solid #d9b24c;
    color: #5f4b08;
    border-radius: 8px;
}

.ah-session-timeout i {
    color: #d9b24c;
}