@font-face {
    font-family: 'HPE Graphik';
    src: url('/brand-assets/HPE%20Graphik/HPE%20Graphik/HPE%20Graphik-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'HPE Graphik';
    src: url('/brand-assets/HPE%20Graphik/HPE%20Graphik/HPE%20Graphik-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'HPE Graphik';
    src: url('/brand-assets/HPE%20Graphik/HPE%20Graphik/HPE%20Graphik-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

:root {
    --hpe-green: #01a982;
    --hpe-green-bright: #00c892;
    --hpe-teal: #18c4d8;
    --hpe-ink: #07141d;
    --hpe-panel: #0d1f2b;
    --hpe-panel-2: #102a38;
    --hpe-text: #f2f7fa;
    --hpe-muted: #9fb4c2;
    --hpe-border: rgba(255, 255, 255, 0.12);
    --hpe-card: rgba(255, 255, 255, 0.05);
}

html, body {
    font-family: 'HPE Graphik', Arial, sans-serif;
}

body.brand-shell {
    background:
        radial-gradient(circle at top right, rgba(1, 169, 130, 0.18), transparent 32%),
        radial-gradient(circle at top left, rgba(24, 196, 216, 0.12), transparent 25%),
        linear-gradient(135deg, #07141d 0%, #0d1f2b 46%, #123548 100%);
    color: var(--hpe-text);
}

.brand-header {
    background: rgba(0, 0, 0, 0.28);
    border-bottom: 1px solid var(--hpe-border);
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--hpe-text);
    text-decoration: none;
}

.brand-logo img {
    height: 32px;
    width: auto;
    display: block;
}

.brand-logo span {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.brand-accent {
    color: var(--hpe-green-bright);
}

.brand-btn,
.brand-btn-secondary {
    font-family: inherit;
}

.brand-btn {
    background: linear-gradient(135deg, var(--hpe-green), #009f6a);
    color: #031116;
    border: none;
    font-weight: 600;
}

.brand-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: var(--hpe-text);
    border: 1px solid var(--hpe-border);
}

.brand-btn-secondary:hover,
.brand-btn:hover {
    filter: brightness(1.05);
}

.brand-btn-secondary:focus-visible,
.brand-btn:focus-visible {
    outline: 2px solid var(--hpe-green-bright);
    outline-offset: 2px;
}

.brand-card {
    background: var(--hpe-card);
    border: 1px solid var(--hpe-border);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.brand-link {
    color: var(--hpe-green-bright);
}

.brand-muted {
    color: var(--hpe-muted);
}