/* Design tokens. Source: Figma palette board 4:4059 (color/* variables), typography and spacing per CLAUDE.md section 2. */
:root {
    --color-secondary: #0e405d;
    --color-primary-container: #ea6f6e;
    --color-outline-variant: #ddc0be;
    --color-on-surface-variant: #574241;
    --color-on-secondary: #ffffff;
    --color-on-primary-container: #610611;
    --color-primary: #a43a3c;
    --color-on-primary: #ffffff;
    --color-primary-fixed: #ffdad8;
    --color-primary-fixed-dim: #ffb3b0;
    --color-on-primary-fixed: #410006;
    --color-on-primary-fixed-variant: #842327;
    --color-surface-tint: #a43a3c;
    --color-secondary-container: #afd9fd;
    --color-on-secondary-container: #35607e;
    --color-secondary-fixed: #cae6ff;
    --color-secondary-fixed-dim: #a1cbee;
    --color-on-secondary-fixed: #001e30;
    --color-on-secondary-fixed-variant: #1d4b68;
    --color-tertiary: #48626f;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #7e99a7;
    --color-on-tertiary-container: #16313c;
    --color-tertiary-fixed: #cbe7f6;
    --color-tertiary-fixed-dim: #afcbd9;
    --color-on-tertiary-fixed: #011e29;
    --color-on-tertiary-fixed-variant: #304a56;
    --color-background: #faf9f9;
    --color-surface: #faf9f9;
    --color-surface-bright: #faf9f9;
    --color-surface-dim: #dadada;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f4f3f3;
    --color-surface-container: #eeeeee;
    --color-surface-container-high: #e8e8e8;
    --color-surface-container-highest: #e2e2e2;
    --color-surface-variant: #e2e2e2;
    --color-on-background: #1a1c1c;
    --color-on-surface: #1a1c1c;
    --color-outline: #8a7170;
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-inverse-surface: #2f3131;
    --color-inverse-on-surface: #f1f1f0;
    --color-inverse-primary: #ffb3b0;

    /* Values used in page frames but not among the 47 variables. */
    --color-callout: #fcf0ed;
    --color-footer-text: #bdd1dd;
    --color-footer-link: #94a3b8;
    --color-secondary-card: #174b67;
    --color-hairline: rgba(14, 64, 93, 0.14);
    --color-footer-rule: rgba(255, 255, 255, 0.19);

    --shadow-dropdown: 0 8px 16px rgba(14, 64, 93, 0.1);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    --page-margin: 80px;
    --content-width: 1280px;
    --canvas-width: 1440px;

    --font-display: "Space Grotesk", sans-serif;
    --font-body: "Inter", sans-serif;

    --text-numeral: 152px;
    --text-h1: 96px;
    --text-h1-small: 72px;
    --text-cta: 60px;
    --text-h2: 48px;
    --text-service-title: 36px;
    --text-h3: 24px;
    --text-lead: 20px;
    --text-body-secondary: 18px;
    --text-body: 16px;
    --text-field-label: 14px;
    --text-tag: 10px;

    --leading-tight: 1.05;
    --leading-heading: 1.2;
    --leading-lead: 1.625;
    --leading-body: 1.5;
}

/* Space Grotesk has no Cyrillic glyphs, so Macedonian headings use Inter Bold */
html[lang="mk"] {
    --font-display: "Inter", sans-serif;
}