@layer marielco-tokens {
    :root {
        --marielco-black: #000000;
        --marielco-white: #ffffff;
        --marielco-surface: #fafafa;
        --marielco-text: var(--marielco-black);
        --marielco-text-muted: #525252;
        --marielco-text-inverse-muted: color-mix(in srgb, var(--marielco-white) 40%, var(--marielco-text-muted));
        --marielco-border-inverse: color-mix(in srgb, var(--marielco-white) 20%, transparent);
        --marielco-border-subtle: #d6d6d6;
        --marielco-background: var(--marielco-white);
        --marielco-border-color: var(--marielco-black);
        --marielco-font-family: "Arimo", Arial, Helvetica, sans-serif;
        --marielco-weight-body: 400;
        --marielco-weight-medium: 500;
        --marielco-text-body: 1rem;
        --marielco-text-small: 0.75rem;
        --marielco-text-control: 0.875rem;
        --marielco-heading-1: clamp(2.25rem, 1.5rem + 3vw, 4rem);
        --marielco-heading-2: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
        --marielco-heading-3: clamp(1.25rem, 1rem + 1vw, 1.5rem);
        --marielco-line-body: 1.5;
        --marielco-line-heading: 1.15;
        --marielco-line-control: 1.4;
        --marielco-tracking-body: 0;
        --marielco-tracking-control: 0.02em;
        --marielco-page-gutter: 1rem;
        --marielco-section-spacing: clamp(3rem, 2rem + 4vw, 6rem);
        --marielco-reading-width: 68ch;
        --marielco-control-height: 3rem;
        --marielco-control-padding-block: 0.75rem;
        --marielco-control-padding-inline: 1.5rem;
        --marielco-button-width: 12rem;
        --marielco-border-width: 1px;
        --marielco-radius: 0;
        --marielco-focus-width: 2px;
        --marielco-focus-offset: 4px;
        --marielco-focus-color: var(--marielco-black);
        --marielco-underline-offset: 0.2em;
        --marielco-transition-fast: 180ms;
        --marielco-transition-standard: 220ms;
        --marielco-header-height: 4.5rem;
        --marielco-z-header: 20;
        --marielco-z-skip-link: 100;
    }

    @media (min-width: 48rem) {
        :root {
            --marielco-page-gutter: 1.5rem;
        }
    }

    @media (min-width: 64rem) {
        :root {
            --marielco-page-gutter: 2.5rem;
        }
    }
}