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

:root {
    /* ================================================= */
    /* SURFACES */
    /* ================================================= */

    --surface-main: #0c0c0c;
    --surface-container: #161617;
    --surface-panel: #0d0d0d;
    --surface-console: var(--surface-pill);
    --surface-disabled: #555;

    --surface-hover: rgba(255, 255, 255, 0.03);

    --surface-pill: rgba(0, 0, 0, 0.315);

    --surface-row-even: rgba(0, 0, 0, 0);
    --surface-row-odd: rgba(255, 255, 255, 0.02);

    /* ================================================= */
    /* TEXT */
    /* ================================================= */

    --text-primary: #eeeeee;
    --text-secondary: #b5b5b5;
    --text-tertiary: #9a9a9a;

    --text-inverse: #ffffff;
    --text-bright: #ffffff;
    --text-footer: #605e5e;

    /* ================================================= */
    /* ICON COLORS */
    /* ================================================= */

    --icon-primary: #cbd5e1;
    --icon-tertiary: var(--text-tertiary);

    /* ================================================= */
    /* SYSTEM STATES */
    /* ================================================= */

    --state-success: #86a97a;
    --state-warning: #c89b5a;
    --state-critical: #d97c7c;
    --state-neutral: #7f8a96;

    /* ================================================= */
    /* HEADER STATES */
    /* ================================================= */

    --header-success: #8cc07b;
    --header-critical: #f08a8a;
    --header-neutral: #b5b5b5;

    /* ================================================= */
    /* ACTIVITYSTREAM STATES */
    /* ================================================= */

    --activityStream-success-edge: 255, 255, 255;
    --activityStream-background: #474f3a24;
    --activityStream-success-depth: 11, 12, 9;
    --activityStream-success-core: 11, 12, 9;
    --activityStream-success-glow: 89, 91, 82;

    --activityStream-console:
        inset -1px -1px 1px rgba(var(--activityStream-success-edge), 0.1),
        inset 1px 1px 8px 3px rgba(var(--activityStream-success-depth), 0.65),
        inset 0px 0px 30px 10px rgb(var(--activityStream-success-core), 0.45);
    /*inset 0 0 40px 40px rgba(var(--activityStream-success-glow), 0.18); */

    --activityStream-success: #8fbf7f;
    --activityStream-warning: #e3b76a;
    --activityStream-critical: #d99a9a;

    --activityStream-neutral-muted: rgba(154, 154, 154, 0.58);
    --activityStream-success-muted: rgba(143, 191, 127, 0.58);
    --activityStream-warning-muted: rgba(216, 180, 110, 0.58);
    --activityStream-critical-muted: rgba(224, 127, 127, 0.58);

    /* ================================================= */
    /* STATUS LIGHTS */
    /* ================================================= */

    --light-success: #9ae082;
    --light-warning: #d8b46e;
    --light-critical: #e07f7f;
    --light-neutral: #7f8a96;

    /* ================================================= */
    /* BORDERS */
    /* ================================================= */

    --border-subtle: #2a2b2e;
    --border-panel: #1c1c1c;
    --border-console: #1f202500;
    --border-faint: rgba(225, 236, 255, 0.02);

    /* ================================================= */
    /* SHADOWS */
    /* ================================================= */

    --shadow-panel: 0 8px 20px rgba(0, 0, 0, 0.45);

    --shadow-depth: -1px 1px 5px rgba(0, 0, 0, 0.15), 1px 1px 5px rgba(0, 0, 0, 0.15);

    --shadow-divider: 0 1px 0 rgba(255, 255, 255, 0.03);

    /* ================================================= */
    /* PANEL SURFACE STATES */
    /* ================================================= */

    --surface-success-edge: 255, 255, 255;
    --surface-state-success: #25271f;
    --surface-success-depth: 11, 12, 9;
    --surface-success-core: 11, 12, 9;
    --surface-success-glow: 89, 91, 82;

    --surface-warning-edge: 255, 255, 255;
    --surface-state-warning: #524715;
    --surface-warning-depth: 26, 23, 7;
    --surface-warning-core: 32, 16, 6;
    --surface-warning-glow: 242, 217, 81;

    --surface-critical-edge: 255, 255, 255;
    --surface-state-critical: #681d0d;
    --surface-critical-depth: 22, 15, 13;
    --surface-critical-core: 36, 10, 4;
    --surface-critical-glow: 231, 32, 26;

    --panel-surface-success:
        inset -1px -1px 1px rgba(var(--surface-success-edge), 0.1),
        inset 1px 1px 8px 3px rgba(var(--surface-success-depth), 0.65),
        inset 0px 0px 40px 5px rgb(var(--surface-success-core)),
        inset 0 0 40px 40px rgba(var(--surface-success-glow), 0.18);

    --panel-surface-warning:
        inset -1px -1px 1px rgba(var(--surface-warning-edge), 0.1),
        inset 1px 1px 8px 3px rgba(var(--surface-warning-depth), 0.65),
        inset 0px 0px 40px 5px rgb(var(--surface-warning-core)),
        inset 0 0 40px 40px rgba(var(--surface-warning-glow), 0.18);

    --panel-surface-critical:
        inset -1px -1px 1px rgba(var(--surface-critical-edge), 0.1),
        inset 1px 1px 8px 3px rgba(var(--surface-critical-depth), 0.65),
        inset 0px 0px 40px 5px rgb(var(--surface-critical-core)),
        inset 0 0 40px 40px rgba(var(--surface-critical-glow), 0.18);

    /* ================================================= */
    /* GLOWS */
    /* ================================================= */

    --glow-critical-soft: rgba(217, 124, 124, 0.45);
    --glow-critical-strong: rgba(217, 124, 124, 0.75);

    /* ================================================= */
    /* HEADER */
    /* ================================================= */
    --header-background: #0d0d0d00;

    /* ================================================= */
    /* LAYOUT */
    /* ================================================= */

    --container-width: 1100px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 20px;
    --space-xl: 30px;

    /* ================================================= */
    /* RADIUS */
    /* ================================================= */

    --radius-panel: 8px;
    --radius-button: 6px;
    --radius-soft: 4px;

    /* ================================================= */
    /* TYPOGRAPHY */
    /* ================================================= */

    --font-primary: "Inter", sans-serif;

    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-lg: 14px;
    --line-height-normal: 1.5;

    /* ================================================= */
    /* TRANSITIONS */
    /* ================================================= */

    --transition-fast: 0.15s ease;
    --transition-smooth: 0.3s ease;
}