/**
 * Specjalmed — Figma epGHCMWH2uqrfKvbdMvT19, inspected 2026-10-08.
 * Colors, desktop sizes, font weights and shadow: Figma.
 * Explicit line heights and intermediate responsive values: proposed web rules.
 * Font is provided by the site's existing font integration; no font files bundled.
 */
:root {
    /* Font families */
    --font-family-body: "stevie-sans", "Stevie Sans", Arial, sans-serif;
    --font-family-heading: var(--font-family-body);

    /* Font sizes — Figma values, assuming the browser's normal 16px root. */
    --font-size-11-2: 0.7rem;
    --font-size-14-4: 0.9rem;
    --font-size-16: 1rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-28-8: 1.8rem;
    --font-size-40: 2.5rem;
    --font-size-48: 3rem;

    /* Stevie Sans weights: Book 400, Regular 500 (Figma lists 550; set to 500 on request, 3.11.2026), Medium 600. */
    --font-weight-book: 400;
    --font-weight-regular: 500;
    --font-weight-medium: 600;
    --font-weight-bold: 700;

    /* Mutable line-height scale; Figma has AUTO, not these explicit ratios. */
    --line-height-xsm: 1.1;
    --line-height-sm: 1.2;
    --line-height-md: 1.35;
    --line-height-lg: 1.5;
    --line-height-xl: 1.6;
    --letter-spacing-default: 0em;

    /* Responsive style roles. All main headings are 600 in Figma. */
    --text-heading-1-size: clamp(1.8rem, 1.352941rem + 1.882353vw, 3rem);
    --text-heading-2-size: clamp(1.8rem, 1.539216rem + 1.098039vw, 2.5rem);
    --text-heading-3-size: clamp(1.5rem, 1.388235rem + 0.470588vw, 1.8rem);
    --text-heading-4-size: var(--font-size-24);
    --text-heading-5-size: var(--font-size-20);
    --text-heading-line-height: var(--line-height-sm);
    --text-heading-weight: var(--font-weight-medium);
    --text-body-size: var(--font-size-16);
    --text-body-sm-size: var(--font-size-14-4);
    --text-caption-size: var(--font-size-11-2);
    --text-body-line-height: var(--line-height-lg);
    --text-body-sm-line-height: var(--line-height-md);
    --text-caption-line-height: var(--line-height-md);

    /* Palette — exact Figma paints. */
    --c-navy: #010a22;
    --c-blue: #0070bd;
    --c-copy: #232c49;
    --c-purple: #19249c;
    --c-white: #ffffff;
    --c-blue-light: #6bc2ee;
    --c-purple-light: #636bc0;
    --c-red: #fa3636;
    --c-green: #1d8128;
    --c-bg-navy: #f6f7fa;
    --c-bg-blue: #f0f6fd;
    --c-bg-main: #fbfeff;
    --c-copy-25: rgb(35 44 73 / 25%);
    --c-copy-50: rgb(35 44 73 / 50%);
    --c-white-25: rgb(255 255 255 / 25%);

    /* Semantic aliases — components use roles, not Elementor IDs. */
    --color-brand: var(--c-blue);
    --color-accent: var(--c-purple);
    --color-heading: var(--c-navy);
    --color-text: var(--c-copy);
    --color-text-inverse: var(--c-white);
    --color-border: var(--c-copy-25);
    --color-background: var(--c-bg-main);
    --color-surface: var(--c-white);
    --color-surface-muted: var(--c-bg-navy);
    --color-surface-brand: var(--c-bg-blue);
    --color-danger: var(--c-red);
    --color-success: var(--c-green);

    /* Recurrent Figma gaps and padding; 64/128 are section-scale values. */
    --space-4: 0.25rem;
    --space-6: 0.375rem;
    --space-8: 0.5rem;
    --space-10: 0.625rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-48: 3rem;
    --space-64: 4rem;
    --space-128: 8rem;

    /* Figma: content 1200px at frame 1400px, mobile gutter 20px. */
    --container-max: 75rem;
    --space-page-x: var(--space-20);
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-pill: 9999px;
    --shadow-blue: 5px 5px 25px 0 rgb(183 217 255 / 25%);
}

/* Page gutter breakpoint is a web proposal, not a Figma breakpoint. */
@media (min-width: 48rem) {
    :root {
        --space-page-x: var(--space-32);
    }
}