/* tokens.css: generated from the Figma variables of SKI SD RUSE (source of truth is Figma).
   Regenerate, do not edit by hand. Breakpoints: Desktop >= 1200, Tablet 768-1199, Mobile <= 767 (proposal, to be confirmed in development). */

:root {
  /* primitives */
  --color-red-100: #fbe9ea;
  --color-red-300: #f0868d;
  --color-red-500: #d9232e;
  --color-red-600: #b51d26;
  --color-red-700: #8e161d;
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f7f6f3;
  --color-neutral-100: #efede8;
  --color-neutral-200: #e5e3de;
  --color-neutral-300: #cfccc5;
  --color-neutral-400: #a3a19b;
  --color-neutral-500: #626262;
  --color-neutral-600: #3a3a3a;
  --color-neutral-700: #242424;
  --color-neutral-900: #171717;
  --color-green-600: #1f7a4a;

  /* semantic colours (use these in components) */
  --color-bg-primary: var(--color-neutral-50);
  --color-bg-secondary: var(--color-neutral-0);
  --color-bg-inverse: var(--color-neutral-900);
  --color-surface-primary: var(--color-neutral-0);
  --color-surface-dark: var(--color-neutral-700);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-accent: var(--color-red-600);
  --color-text-accent-inverse: var(--color-red-300);
  --color-text-on-action: var(--color-neutral-0);
  --color-text-disabled: var(--color-neutral-400);
  --color-action-primary: var(--color-red-500);
  --color-action-primary-hover: var(--color-red-600);
  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-500);
  --color-border-inverse: var(--color-neutral-600);
  --color-border-focus: var(--color-neutral-900);
  --color-border-focus-inverse: var(--color-neutral-0);
  --color-border-strong-inverse: var(--color-neutral-300);
  --color-status-success: var(--color-green-600);

  /* spacing (multiples of 8, plus 4 and 12) */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-120: 120px;
  --spacing-160: 160px;

  /* radius */
  --radius-small: 4px;
  --radius-medium: 8px;

  /* layout: Desktop */
  --layout-viewport-width: 1440px;
  --layout-columns: 12;
  --layout-margin: 80px;
  --layout-gutter: 24px;
  --layout-container-width: 1280px;
  --layout-nav-height: 80px;
  --layout-section-padding-y: 120px;
  --layout-section-header-gap: 64px;

  /* typography: Desktop */
  --typography-font-family-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --typography-display-size: 80px;
  --typography-display-line-height: 84px;
  --typography-display-letter-spacing: -2px;
  --typography-h1-size: 60px;
  --typography-h1-line-height: 66px;
  --typography-h1-letter-spacing: -1.2px;
  --typography-h2-size: 46px;
  --typography-h2-line-height: 52px;
  --typography-h2-letter-spacing: -0.7px;
  --typography-h3-size: 32px;
  --typography-h3-line-height: 40px;
  --typography-h3-letter-spacing: -0.3px;
  --typography-h4-size: 24px;
  --typography-h4-line-height: 32px;
  --typography-h4-letter-spacing: -0.1px;
  --typography-body-large-size: 18px;
  --typography-body-large-line-height: 28px;
  --typography-body-large-letter-spacing: 0px;
  --typography-body-size: 16px;
  --typography-body-line-height: 26px;
  --typography-body-letter-spacing: 0px;
  --typography-small-size: 14px;
  --typography-small-line-height: 22px;
  --typography-small-letter-spacing: 0px;
  --typography-eyebrow-size: 13px;
  --typography-eyebrow-line-height: 16px;
  --typography-eyebrow-letter-spacing: 1.8px;
  --typography-navigation-size: 15px;
  --typography-navigation-line-height: 20px;
  --typography-navigation-letter-spacing: 0px;
  --typography-button-size: 15px;
  --typography-button-line-height: 20px;
  --typography-button-letter-spacing: 0.1px;
  --typography-caption-size: 12px;
  --typography-caption-line-height: 16px;
  --typography-caption-letter-spacing: 0px;
}

/* Tablet */
@media (max-width: 1199px) {
  :root {
    --layout-viewport-width: 768px;
    --layout-columns: 8;
    --layout-margin: 32px;
    --layout-gutter: 24px;
    --layout-container-width: 704px;
    --layout-nav-height: 72px;
    --layout-section-padding-y: 96px;
    --layout-section-header-gap: 48px;
    --typography-display-size: 60px;
    --typography-display-line-height: 64px;
    --typography-display-letter-spacing: -1.5px;
    --typography-h1-size: 46px;
    --typography-h1-line-height: 52px;
    --typography-h1-letter-spacing: -0.9px;
    --typography-h2-size: 36px;
    --typography-h2-line-height: 42px;
    --typography-h2-letter-spacing: -0.5px;
    --typography-h3-size: 28px;
    --typography-h3-line-height: 34px;
    --typography-h3-letter-spacing: -0.3px;
    --typography-h4-size: 22px;
    --typography-h4-line-height: 30px;
    --typography-h4-letter-spacing: -0.1px;
    --typography-body-large-size: 18px;
    --typography-body-large-line-height: 28px;
    --typography-body-large-letter-spacing: 0px;
    --typography-body-size: 16px;
    --typography-body-line-height: 26px;
    --typography-body-letter-spacing: 0px;
    --typography-small-size: 14px;
    --typography-small-line-height: 22px;
    --typography-small-letter-spacing: 0px;
    --typography-eyebrow-size: 13px;
    --typography-eyebrow-line-height: 16px;
    --typography-eyebrow-letter-spacing: 1.8px;
    --typography-navigation-size: 15px;
    --typography-navigation-line-height: 20px;
    --typography-navigation-letter-spacing: 0px;
    --typography-button-size: 15px;
    --typography-button-line-height: 20px;
    --typography-button-letter-spacing: 0.1px;
    --typography-caption-size: 12px;
    --typography-caption-line-height: 16px;
    --typography-caption-letter-spacing: 0px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --layout-viewport-width: 390px;
    --layout-columns: 4;
    --layout-margin: 24px;
    --layout-gutter: 16px;
    --layout-container-width: 342px;
    --layout-nav-height: 64px;
    --layout-section-padding-y: 64px;
    --layout-section-header-gap: 48px;
    --typography-display-size: 44px;
    --typography-display-line-height: 48px;
    --typography-display-letter-spacing: -1.1px;
    --typography-h1-size: 38px;
    --typography-h1-line-height: 44px;
    --typography-h1-letter-spacing: -0.8px;
    --typography-h2-size: 30px;
    --typography-h2-line-height: 36px;
    --typography-h2-letter-spacing: -0.5px;
    --typography-h3-size: 24px;
    --typography-h3-line-height: 30px;
    --typography-h3-letter-spacing: -0.2px;
    --typography-h4-size: 20px;
    --typography-h4-line-height: 28px;
    --typography-h4-letter-spacing: -0.1px;
    --typography-body-large-size: 18px;
    --typography-body-large-line-height: 28px;
    --typography-body-large-letter-spacing: 0px;
    --typography-body-size: 16px;
    --typography-body-line-height: 24px;
    --typography-body-letter-spacing: 0px;
    --typography-small-size: 14px;
    --typography-small-line-height: 20px;
    --typography-small-letter-spacing: 0px;
    --typography-eyebrow-size: 12px;
    --typography-eyebrow-line-height: 16px;
    --typography-eyebrow-letter-spacing: 1.7px;
    --typography-navigation-size: 17px;
    --typography-navigation-line-height: 24px;
    --typography-navigation-letter-spacing: 0px;
    --typography-button-size: 15px;
    --typography-button-line-height: 20px;
    --typography-button-letter-spacing: 0.1px;
    --typography-caption-size: 12px;
    --typography-caption-line-height: 16px;
    --typography-caption-letter-spacing: 0px;
  }
}

/* text styles (1:1 with the Figma text styles) */
.t-display {
  font-family: var(--typography-font-family-primary);
  font-weight: 700;
  font-size: var(--typography-display-size);
  line-height: var(--typography-display-line-height);
  letter-spacing: var(--typography-display-letter-spacing);
}
.t-h1 {
  font-family: var(--typography-font-family-primary);
  font-weight: 700;
  font-size: var(--typography-h1-size);
  line-height: var(--typography-h1-line-height);
  letter-spacing: var(--typography-h1-letter-spacing);
}
.t-h2 {
  font-family: var(--typography-font-family-primary);
  font-weight: 700;
  font-size: var(--typography-h2-size);
  line-height: var(--typography-h2-line-height);
  letter-spacing: var(--typography-h2-letter-spacing);
}
.t-h3 {
  font-family: var(--typography-font-family-primary);
  font-weight: 700;
  font-size: var(--typography-h3-size);
  line-height: var(--typography-h3-line-height);
  letter-spacing: var(--typography-h3-letter-spacing);
}
.t-h4 {
  font-family: var(--typography-font-family-primary);
  font-weight: 700;
  font-size: var(--typography-h4-size);
  line-height: var(--typography-h4-line-height);
  letter-spacing: var(--typography-h4-letter-spacing);
}
.t-body-large {
  font-family: var(--typography-font-family-primary);
  font-weight: 400;
  font-size: var(--typography-body-large-size);
  line-height: var(--typography-body-large-line-height);
  letter-spacing: var(--typography-body-large-letter-spacing);
}
.t-body {
  font-family: var(--typography-font-family-primary);
  font-weight: 400;
  font-size: var(--typography-body-size);
  line-height: var(--typography-body-line-height);
  letter-spacing: var(--typography-body-letter-spacing);
}
.t-small {
  font-family: var(--typography-font-family-primary);
  font-weight: 400;
  font-size: var(--typography-small-size);
  line-height: var(--typography-small-line-height);
  letter-spacing: var(--typography-small-letter-spacing);
}
.t-eyebrow {
  font-family: var(--typography-font-family-primary);
  font-weight: 700;
  font-size: var(--typography-eyebrow-size);
  line-height: var(--typography-eyebrow-line-height);
  letter-spacing: var(--typography-eyebrow-letter-spacing);
  text-transform: uppercase;
}
.t-navigation {
  font-family: var(--typography-font-family-primary);
  font-weight: 500;
  font-size: var(--typography-navigation-size);
  line-height: var(--typography-navigation-line-height);
  letter-spacing: var(--typography-navigation-letter-spacing);
}
.t-button {
  font-family: var(--typography-font-family-primary);
  font-weight: 500;
  font-size: var(--typography-button-size);
  line-height: var(--typography-button-line-height);
  letter-spacing: var(--typography-button-letter-spacing);
}
.t-caption {
  font-family: var(--typography-font-family-primary);
  font-weight: 400;
  font-size: var(--typography-caption-size);
  line-height: var(--typography-caption-line-height);
  letter-spacing: var(--typography-caption-letter-spacing);
}

/* layout helpers */
/* Container: capped at Desktop width (1280 + 2 x 80 = 1440), FLUID below that. On Tablet and Mobile the
   --layout-container-width values (704 / 342) are the widths of the Figma reference frames (768 / 390),
   not maximum widths: content width = viewport - 2 x margin at every breakpoint. */
.container { width: 100%; max-width: calc(var(--layout-container-width) + 2 * var(--layout-margin)); margin-inline: auto; padding-inline: var(--layout-margin); }
@media (max-width: 1199px) { .container { max-width: none; } }
.section { padding-block: var(--layout-section-padding-y); }
.section__header { margin-bottom: var(--layout-section-header-gap); }

/* Instructor grid (Figma: Inštruktorji — 3 fixed columns on Desktop and Tablet, 1 on Mobile; extra cards
   beyond 3 wrap under the first row at the same width). */
.instructor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 53px; }
@media (max-width: 767px) { .instructor-grid { grid-template-columns: 1fr; gap: 24px; } }

/* focus (all interactive elements) */
:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 4px; border-radius: var(--radius-small); }
.on-dark :focus-visible { outline-color: var(--color-border-focus-inverse); }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }