:root {
    /* Industrial Dataism Design System */
    --primary: #9dd846;
    --primary-container: #6da30d;
    --on-primary: #213600;
    --primary-fixed: #b8f560;
    --primary-fixed-dim: #9dd846;
    --on-primary-fixed: #111f00;
    --on-primary-fixed-variant: #324f00;

    --secondary: #bcc7de;
    --secondary-container: #3e495d;
    --on-secondary: #263143;
    --secondary-fixed: #d8e3fb;
    --secondary-fixed-dim: #bcc7de;
    --on-secondary-fixed: #111c2d;
    --on-secondary-fixed-variant: #3c475a;

    --tertiary: #c4c7c9;
    --tertiary-container: #919496;
    --on-tertiary: #2d3133;
    --tertiary-fixed: #e0e3e5;
    --tertiary-fixed-dim: #c4c7c9;
    --on-tertiary-fixed: #191c1e;
    --on-tertiary-fixed-variant: #444749;

    --background: #0b1326;

    --surface: #0b1326;
    --surface-dim: #0b1326;
    --surface-bright: #31394d;
    --surface-container-lowest: #060e20;
    --surface-container-low: #131b2e;
    --surface-container: #171f33;
    --surface-container-high: #222a3d;
    --surface-container-highest: #2d3449;

    --on-surface: #dae2fd;
    --on-surface-variant: #c2c9b2;
    --inverse-surface: #dae2fd;
    --inverse-on-surface: #283044;

    --outline: #8c937e;
    --outline-variant: #434937;

    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;

    /* Typography */
    --font-display: 'JetBrains Mono', monospace;
    --font-headline: 'IBM Plex Sans', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Shapes / Rounded */
    --radius-sm: 0.125rem;
    --radius-default: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* Spacing */
    --spacing-unit: 4px;
    --spacing-gutter: 16px;
    --spacing-margin-mobile: 16px;
    --spacing-margin-desktop: 32px;
    --spacing-container-max: 1440px;
}

body {
    background-color: var(--background);
    color: var(--on-surface);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.display-lg {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1.0;
    letter-spacing: -0.04em;
    font-weight: 700;
}

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--outline-variant);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-default);
    font-weight: 700;
    font-family: var(--font-headline);
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
}

.btn-primary:hover {
    background-color: var(--primary-fixed-dim);
    opacity: 0.9;
}

.card {
    background-color: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.glass {
    background: rgba(23, 31, 51, 0.75) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--outline-variant) !important;
}