:root {
    --color-industrial-red: #E31E24;
    --color-primary: #5d5e5f;
    --color-secondary: #0054cb;
    --color-tertiary: #755755;
    --color-background: #faf8ff;
    --color-surface: #faf8ff;
    --color-surface-bright: #faf8ff;
    --color-surface-dim: #d9d9e3;
    --color-surface-container: #ededf7;
    --color-surface-container-low: #f3f3fd;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-high: #e7e7f1;
    --color-surface-container-highest: #e1e2eb;
    --color-surface-variant: #e1e2eb;
    --color-surface-tint: #5d5e5f;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #4b4c4d;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #fefcff;
    --color-on-surface: #191b22;
    --color-on-surface-variant: #444748;
    --color-on-background: #191b22;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #614544;
    --color-primary-fixed: #e3e2e2;
    --color-primary-fixed-dim: #c6c6c6;
    --color-secondary-fixed: #dae2ff;
    --color-secondary-fixed-dim: #b1c5ff;
    --color-tertiary-fixed: #ffdad8;
    --color-tertiary-fixed-dim: #e4bdbb;
    --color-on-primary-fixed: #1a1c1c;
    --color-on-primary-fixed-variant: #464747;
    --color-on-secondary-fixed: #001847;
    --color-on-secondary-fixed-variant: #00409f;
    --color-on-tertiary-fixed: #2b1615;
    --color-on-tertiary-fixed-variant: #5b403e;
    --color-primary-container: #bdbdbd;
    --color-secondary-container: #326ee6;
    --color-tertiary-container: #dab4b2;
    --color-inverse-surface: #2e3037;
    --color-inverse-on-surface: #f0f0fa;
    --color-inverse-primary: #c6c6c6;
    --color-outline: #747878;
    --color-outline-variant: #c4c7c7;
    --color-error: #ba1a1a;
    --color-error-container: #ffdad6;
    --color-on-error: #ffffff;
    --color-on-error-container: #93000a;

    --font-heading: 'Hanken Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-label: 'JetBrains Mono', monospace;

    --radius-default: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 48px;
    --spacing-margin-mobile: 16px;
    --spacing-margin-desktop: 64px;
    --spacing-gutter: 16px;
    --container-max: 1280px;

    --font-size-label: 0.75rem;
    --font-size-body-sm: 0.875rem;
    --font-size-body-md: 1rem;
    --font-size-headline-lg-mobile: 2rem;
    --font-size-headline-lg: 3rem;
    --font-size-headline-xl: 4rem;

    --line-height-label: 1rem;
    --line-height-body-sm: 1.25rem;
    --line-height-body-md: 1.5rem;
    --line-height-headline-lg-mobile: 2.25rem;
    --line-height-headline-lg: 1.2;
    --line-height-headline-xl: 1.1;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
    background-color: #ffffff;
    color: #121314;
    overflow-x: hidden;
    font-family: var(--font-body);
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-body-md);
}

.industrial-grid {
    background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.font-headline-xl {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 8vw, var(--font-size-headline-xl));
    line-height: var(--line-height-headline-xl);
    font-weight: 800;
}

.font-headline-lg {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, var(--font-size-headline-lg));
    line-height: var(--line-height-headline-lg);
    font-weight: 700;
}

.font-body-md {
    font-family: var(--font-body);
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-body-md);
}

.font-body-sm {
    font-family: var(--font-body);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-body-sm);
}

.font-label-caps {
    font-family: var(--font-label);
    font-size: var(--font-size-label);
    line-height: var(--line-height-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
}

.text-industrial-red {
    color: var(--color-industrial-red);
}

.text-primary {
    color: var(--color-primary);
}

.bg-industrial-red {
    background-color: var(--color-industrial-red);
}

.bg-black {
    background-color: #000000;
}

.bg-white {
    background-color: #ffffff;
}

.text-white {
    color: #ffffff;
}

.text-black {
    color: #000000;
}

.border-industrial-red {
    border-color: var(--color-industrial-red);
}

.border-black {
    border-color: #000000;
}

.hover\:text-industrial-red:hover {
    color: var(--color-industrial-red);
}

.hover\:bg-industrial-red:hover {
    background-color: var(--color-industrial-red);
}

.hover\:bg-black:hover {
    background-color: #000000;
}

.hover\:text-white:hover {
    color: #ffffff;
}