:root {
    --lp-text-strong: color-mix(in srgb, var(--mud-palette-primary) 90%, var(--mud-palette-background) 10%);
    --lp-text-main: color-mix(in srgb, var(--mud-palette-primary) 90%, var(--mud-palette-background) 10%);
    --lp-text-main2: color-mix(in srgb, var(--mud-palette-text-primary) 80%, var(--mud-palette-background) 20%);
    --lp-text-soft: color-mix(in srgb, var(--mud-palette-text-primary) 70%, var(--mud-palette-background) 30%);
    --lp-text-muted: color-mix(in srgb, var(--mud-palette-text-primary) 50%, var(--mud-palette-background) 50%);
    --lp-text-faint: color-mix(in srgb, var(--mud-palette-text-primary) 25%, var(--mud-palette-background) 75%);
    --lp-surface-1: color-mix(in srgb, var(--mud-palette-text-primary) 10%, var(--mud-palette-background) 90%);
    --lp-surface-2: color-mix(in srgb, var(--mud-palette-text-primary) 25%, var(--mud-palette-background) 75%);
    --lp-border-soft: color-mix(in srgb, var(--mud-palette-text-primary) 30%, var(--mud-palette-background) 70%);
    --lp-border-mid: color-mix(in srgb, var(--mud-palette-text-primary) 60%, var(--mud-palette-background) 40%);
}

.general-page-container {
    width: 94%;
    max-width: 2160px;
}

/* ---------- Text hierarchy ---------- */

.general-page-heading {
    color: var(--lp-text-strong);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.general-page-title {
    color: var(--lp-text-main);
    font-weight: 500;
    line-height: 1.0;
}

.general-section-title {
    color: var(--lp-text-main2);
    font-weight: 600;
    line-height: 1.28;
}

.general-text-description {
    color: var(--lp-text-soft);
    font-weight: 400;
    line-height: 1.5;
    max-width: 72ch;
}