/*
 * Globe.Hosting shared design foundation.
 *
 * This file contains only brand tokens and local fonts. Client and admin
 * component styling stays in their own stylesheets so WHMCS upgrades do not
 * require copied core templates.
 */

@font-face {
    font-family: "Globe Inter";
    src: url("../fonts/inter-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Globe Manrope";
    src: url("../fonts/manrope-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --globe-navy-950: #031629;
    --globe-navy-900: #071d33;
    --globe-navy-800: #0b2946;
    --globe-ink: #0b2035;
    --globe-copy: #526578;
    --globe-muted: #728295;
    --globe-orange: #ff7007;
    --globe-orange-dark: #d85300;
    --globe-orange-soft: #fff2e8;
    --globe-blue: #078dcc;
    --globe-blue-soft: #eaf7fd;
    --globe-green: #008e5b;
    --globe-green-soft: #e9f8f1;
    --globe-red: #c8323e;
    --globe-red-soft: #fff0f1;
    --globe-amber: #a45d00;
    --globe-amber-soft: #fff7e6;
    --globe-canvas: #f5f8fa;
    --globe-surface: #ffffff;
    --globe-surface-muted: #f8fafb;
    --globe-border: #dce3e9;
    --globe-border-strong: #c7d1da;
    --globe-font-body: "Globe Inter", Inter, "Segoe UI", Arial, sans-serif;
    --globe-font-heading: "Globe Manrope", "Globe Inter", "Segoe UI", Arial, sans-serif;
    --globe-radius-xs: 3px;
    --globe-radius-sm: 5px;
    --globe-radius: 7px;
    --globe-shadow-xs: 0 1px 2px rgba(3, 22, 41, 0.06);
    --globe-shadow-sm: 0 3px 12px rgba(3, 22, 41, 0.08);
    --globe-shadow-panel: 0 10px 28px rgba(3, 22, 41, 0.1);
    --globe-transition: 160ms ease;
}

.globe-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}