:root {
    /* Typography */
    --f12-font-sans:
        "Quicksand", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter,
        Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
        sans-serif;
    --f12-font-mono:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    --f12-text-2xs: 0.65rem;
    --f12-text-xs: 0.75rem;
    --f12-text-sm: 0.9rem;
    --f12-text-md: 1rem;
    --f12-text-lg: 1.125rem;
    --f12-text-xl: 1.25rem;
    --f12-text-2xl: 1.5rem;
    --f12-text-3xl: 2rem;
    --f12-text-4xl: 2.5rem;

    /* Font weights */
    --f12-weight-regular: 400;
    --f12-weight-medium: 500;
    --f12-weight-semibold: 600;
    --f12-weight-bold: 700;

    --f12-leading-tight: 1.15;
    --f12-leading-normal: 1.5;
    --f12-leading-relaxed: 1.65;

    --f12-tracking-tight: -0.02em;
    --f12-tracking-caps: 0.12em;
    --f12-tracking-editorial: 0.25em;

    /* Semantic typography (role-based) */
    --f12-type-card-title-sm-size: var(--f12-text-md);
    --f12-type-card-title-sm-leading: 1.3;
    --f12-type-card-title-sm-weight: var(--f12-weight-bold);
    --f12-type-card-title-sm-tracking: var(--f12-tracking-tight);

    --f12-type-body-md-size: var(--f12-text-md);
    --f12-type-body-md-leading: var(--f12-leading-relaxed);
    --f12-type-body-md-weight: var(--f12-weight-medium);

    --f12-type-body-sm-size: var(--f12-text-sm);
    --f12-type-body-sm-leading: var(--f12-leading-normal);
    --f12-type-body-sm-weight: var(--f12-weight-medium);

    --f12-type-body-muted-color: var(--f12-color-muted);

    --f12-type-story-title-size: 1.6rem;
    --f12-type-story-title-leading: 1.3;
    --f12-type-story-title-weight: var(--f12-weight-bold);
    --f12-type-story-title-tracking: var(--f12-tracking-tight);

    --f12-type-hero-title-size: var(--f12-text-3xl);
    --f12-type-hero-title-leading: var(--f12-leading-tight);
    --f12-type-hero-title-weight: var(--f12-weight-bold);
    --f12-type-hero-title-tracking: var(--f12-tracking-tight);

    --f12-type-hero-excerpt-size: var(--f12-text-lg);
    --f12-type-hero-excerpt-leading: var(--f12-leading-normal);
    --f12-type-hero-excerpt-color: rgba(255, 255, 255, 0.9);

    /* Spacing (4px scale + 2px micro-step) */
    --f12-space-0-5: 0.125rem;
    --f12-space-1: 0.25rem;
    --f12-space-2: 0.5rem;
    --f12-space-3: 0.75rem;
    --f12-space-4: 1rem;
    --f12-space-5: 1.25rem;
    --f12-space-6: 1.5rem;
    --f12-space-8: 2rem;
    --f12-space-10: 2.5rem;
    --f12-space-12: 3rem;
    --f12-space-16: 4rem;

    /* Radius */
    --f12-radius-1: 0.5rem;
    --f12-radius-2: 0.75rem;
    --f12-radius-3: 1rem;
    --f12-radius-pill: 999px;

    /* Color system (semantic) */
    --f12-color-accent: #a6201a;
    --f12-color-accent-soft: rgba(166, 32, 26, 0.08);
    --f12-color-accent-contrast: #ffffff;

    --f12-color-text: #2d2d2d;
    --f12-color-heading: #333333;
    --f12-color-muted: #757575;

    --f12-color-surface: #ffffff;
    --f12-color-bg: #ffffff;
    --f12-color-bg-subtle: #f6f7fb;
    --f12-color-subtle: #f2f2f2;
    --f12-color-border: rgba(45, 45, 45, 0.12);

    --f12-color-focus: rgba(166, 32, 26, 0.55);
    --f12-color-focus-ring: rgba(166, 32, 26, 0.18);

    /* Shadows */
    --f12-shadow-1: 0 4px 20px rgba(0, 0, 0, 0.04);
    --f12-shadow-2: 0 12px 40px rgba(0, 0, 0, 0.08);

    /* Motion */
    --f12-ease-standard: cubic-bezier(0.165, 0.84, 0.44, 1);
    --f12-duration-fast: 150ms;
    --f12-duration-normal: 280ms;
}