:root {
    --portal-primary: #007f83;
    --portal-primary-dark: #06484f;
    --portal-secondary: #0aa7a5;
    --portal-text: #1f2933;
    --portal-text-muted: #64748b;
    --portal-text-white: #ffffff;
    --portal-background: #f4f8f8;
    --portal-surface: #ffffff;
    --portal-surface-soft: #edf8f7;
    --portal-border: #cfe2e1;
    --portal-font-family: "Helvetica Neue", Arial, sans-serif;
    --portal-focus-ring: rgba(0, 127, 131, 0.24);

    --portal-brand-navy: var(--portal-primary-dark);
    --portal-auth-surface: var(--portal-surface);
    --portal-auth-input-surface: var(--portal-surface-soft);
    --portal-auth-text: var(--portal-text);
    --portal-auth-muted: var(--portal-text-muted);
    --portal-auth-border: var(--portal-border);
    --portal-auth-focus-border: rgba(0, 127, 131, 0.38);
    --portal-auth-focus-ring: var(--portal-focus-ring);
    --portal-error-text: #9f2424;
    --portal-error-border: #f2b8b8;
    --portal-error-background: #fff1f1;
    --portal-success-text: #166534;
    --portal-success-background: #f0fdf4;

    --ssnexus-color-primary: var(--portal-primary);
    --ssnexus-color-primary-dark: var(--portal-primary-dark);
    --ssnexus-color-secondary: var(--portal-secondary);
    --ssnexus-color-text: var(--portal-text);
    --ssnexus-color-muted: var(--portal-text-muted);
    --ssnexus-color-inverse: var(--portal-text-white);
    --ssnexus-color-background: var(--portal-background);
    --ssnexus-color-surface: var(--portal-surface);
    --ssnexus-color-surface-soft: var(--portal-surface-soft);
    --ssnexus-color-border: var(--portal-border);
    --ssnexus-color-focus: var(--portal-focus-ring);
    --ssnexus-font-family: var(--portal-font-family);
    --ssnexus-color-brand-navy: var(--portal-brand-navy);
    --ssnexus-auth-surface: var(--portal-auth-surface);
    --ssnexus-auth-input-surface: var(--portal-auth-input-surface);
    --ssnexus-auth-text: var(--portal-auth-text);
    --ssnexus-auth-muted: var(--portal-auth-muted);
    --ssnexus-auth-border: var(--portal-auth-border);
    --ssnexus-auth-focus-border: var(--portal-auth-focus-border);
    --ssnexus-auth-focus-ring: var(--portal-auth-focus-ring);
    --ssnexus-auth-error-text: var(--portal-error-text);
    --ssnexus-auth-error-border: var(--portal-error-border);
    --ssnexus-auth-error-background: var(--portal-error-background);

    --ssnexus-font-size-xs: 0.75rem;
    --ssnexus-font-size-sm: 0.8125rem;
    --ssnexus-font-size-md: 0.9375rem;
    --ssnexus-font-size-base: 1rem;
    --ssnexus-font-size-lg: 1.125rem;
    --ssnexus-font-size-xl: 1.75rem;
    --ssnexus-line-height: 1.5;
    --ssnexus-font-weight-semibold: 600;
    --ssnexus-font-weight-bold: 700;

    --ssnexus-space-xs: 0.25rem;
    --ssnexus-space-sm: 0.5rem;
    --ssnexus-space-md: 0.75rem;
    --ssnexus-space-lg: 1rem;
    --ssnexus-space-xl: 1.5rem;
    --ssnexus-space-page: 1.5rem;

    --ssnexus-radius-sm: 4px;
    --ssnexus-radius-md: 8px;
    --ssnexus-radius-lg: 8px;
    --ssnexus-radius-pill: 999px;
    --ssnexus-control-height: 44px;
    --ssnexus-sidebar-width: 292px;
    --ssnexus-sidebar-collapsed-width: 72px;
    --ssnexus-topbar-height: 72px;
    --ssnexus-shadow-panel: 0 12px 28px rgba(31, 41, 51, 0.08);
    --ssnexus-shadow-shell: 8px 0 24px rgba(4, 57, 63, 0.22);
    --ssnexus-transition-fast: 160ms ease;
    --ssnexus-z-sidebar: 1000;
    --ssnexus-z-backdrop: 990;
    --ssnexus-icon-muted: var(--portal-text-muted, #64748b);
    --ssnexus-notification-active: #d9a441;
    --ssnexus-notification-active-bg: rgba(217, 164, 65, 0.14);
    --ssnexus-notification-empty-bg: rgba(100, 116, 139, 0.10);
    --ssnexus-workspace-intro-image: url('/assets/workspace/ssnexus-workspace-intro-01.png');
    --ssnexus-workspace-intro-overlay: linear-gradient(90deg, rgba(4, 57, 63, 0.82), rgba(0, 127, 131, 0.52) 52%, rgba(4, 57, 63, 0.08));
}

html {
    box-sizing: border-box;
    min-height: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    background: var(--ssnexus-color-background);
    color: var(--ssnexus-color-text);
    font-family: var(--ssnexus-font-family);
    font-size: var(--ssnexus-font-size-base);
    line-height: var(--ssnexus-line-height);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--ssnexus-color-focus);
}