/* Design tokens of Kurason pa Kòrsou, taken one-to-one from the Figma variables (00_Design Tile).
   Colour collection (one mode) and Layout collection (Desktop mode; the Mobile mode follows in the
   media query below the breakpoint of 701 px, see "Breakpoints" in the Figma handover).
   The names are the code syntax Figma shows in Dev Mode: var(--kpk-...). Never write a colour or a
   size of the design loose in another stylesheet; use these tokens. */
:root {
    /* Color / brand */
    --kpk-color-brand-primary: #2d3291;
    --kpk-color-brand-primary-hover: #262b7b;
    --kpk-color-brand-primary-selected: #202366;
    --kpk-color-brand-primary-alt: #7d4196;
    --kpk-color-brand-primary-alt-hover: #6a3780;
    --kpk-color-brand-primary-alt-selected: #582e69;
    --kpk-color-brand-primary-soft: #8184bd;
    --kpk-color-brand-primary-soft-hover: #6e70a1;
    --kpk-color-brand-primary-soft-selected: #5a5c84;
    --kpk-color-brand-secondary: #eb008c;
    --kpk-color-brand-secondary-hover: #c80077;
    --kpk-color-brand-secondary-selected: #a40062;
    --kpk-color-brand-accent: #faaf41;
    --kpk-color-brand-accent-hover: #d49537;
    --kpk-color-brand-accent-selected: #af7b2e;
    --kpk-color-brand-accent-alt: #f05a28;
    --kpk-color-brand-accent-alt-hover: #cc4d22;
    --kpk-color-brand-accent-alt-selected: #a83f1c;
    --kpk-color-brand-accent-warm: #ff9800;
    --kpk-color-brand-accent-warm-hover: #d98100;
    --kpk-color-brand-accent-warm-selected: #b26a00;
    /* Color / surface */
    --kpk-color-surface-default: #ffffff;
    --kpk-color-surface-inverse: #000000;
    --kpk-color-surface-placeholder: #d9d9d9;
    /* Color / text */
    --kpk-color-text-default: #000000;
    --kpk-color-text-inverse: #ffffff;
    --kpk-color-text-inverse-hover: #d9d9d9;
    --kpk-color-text-inverse-selected: #b2b2b2;
    --kpk-color-text-brand: var(--kpk-color-brand-primary);
    --kpk-color-text-on-brand: var(--kpk-color-surface-default);
    /* Layout / space (Desktop mode) */
    --kpk-space-2xs: 4px;
    --kpk-space-xs: 8px;
    --kpk-space-sm: 12px;
    --kpk-space-md: 16px;
    --kpk-space-lg: 24px;
    --kpk-space-xl: 32px;
    --kpk-space-2xl: 48px;
    --kpk-space-3xl: 64px;
    --kpk-space-4xl: 96px;
    --kpk-space-section: 120px;
    /* Layout / radius (Desktop mode) */
    --kpk-radius-none: 0px;
    --kpk-radius-md: 8px;
    --kpk-radius-lg: 50px;
    --kpk-radius-xl: 100px;
    --kpk-radius-full: 999px;
    /* Layout / layout (Desktop mode) */
    --kpk-layout-viewport: 1440px;
    --kpk-layout-margin: 190px;
    --kpk-layout-content-max: 1060px;
    --kpk-layout-columns: 12;
    --kpk-layout-gutter: 24px;
    --kpk-layout-header-height: 112px;
    --kpk-layout-safe-area-top: 0px;
    /* Maximum width of the whole layout (Figma handover: max-width 1600px, centred; coloured
       backgrounds keep running to the edge of the screen). */
    --kpk-layout-max-width: 1600px;
    /* Typography (00_Design Tile · 02 Typografie). Macho SemiBold for headings, buttons and
       navigation, Inter for running text. */
    --kpk-font-heading: "Macho", "Kurason Heading Fallback", "Inter", "Segoe UI", system-ui, sans-serif;
    --kpk-font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --kpk-text-heading-xl-size: 64px;   /* 11x hero headings, 120%, -2% */
    --kpk-text-heading-lg-size: 48px;   /* 120%, -2% */
    --kpk-text-heading-md-size: 32px;   /* 38x section headings, 120%, -2% */
    --kpk-text-heading-sm-size: 20px;   /* 115x card headings, 160% */
    --kpk-text-label-lg-size: 20px;     /* large buttons, 130% */
    --kpk-text-label-md-size: 16px;     /* 40x buttons, 130% */
    --kpk-text-label-sm-size: 15px;     /* 61x navigation and labels, 130% */
    --kpk-text-body-lg-size: 20px;      /* 19x intro paragraphs, Inter Bold, 160% */
    --kpk-text-body-md-size: 16px;      /* 100x running text, Inter Regular, 160% */
    --kpk-text-heading-weight: 600;
    --kpk-text-heading-line: 1.2;
    --kpk-text-heading-tracking: -0.02em;
    --kpk-text-label-line: 1.3;
    --kpk-text-body-line: 1.6;
}

/* Layout collection, Mobile mode: up to and including 701 px (Figma handover: mobile ends at 701,
   tablet is 702 to 1025 and keeps the mobile values with wider blocks, desktop starts at 1026). */
@media (max-width: 1025px) {
    :root {
        --kpk-space-lg: 20px;
        --kpk-space-xl: 24px;
        --kpk-space-2xl: 32px;
        --kpk-space-3xl: 40px;
        --kpk-space-4xl: 56px;
        --kpk-space-section: 64px;
        --kpk-radius-lg: 32px;
        --kpk-radius-xl: 56px;
        --kpk-layout-viewport: 390px;
        --kpk-layout-margin: 20px;
        --kpk-layout-content-max: 350px;
        --kpk-layout-columns: 4;
        --kpk-layout-gutter: 16px;
        --kpk-layout-header-height: 72px;
    }
}