/* Design tokens. Source: paktsi/css/base.css :root. Do not invent hex. */

:root {
  --color-primary: #9387FF;
  --color-primary-deep: #6a5dff;
  --color-primary-strong: #5F50C9;
  --color-primary-soft: #B5A4FF;
  --color-primary-softer: #C4B5FF;
  --color-primary-bold: #7B6CF0;
  --color-primary-hover: #7B6CF0;
  --color-secondary: #A0D6F4;
  --color-accent: #9387FF;
  --color-gradient: linear-gradient(to right, #A0D6F4, #9387FF);
  --color-link: #5F50C9;
  --color-text-muted: #595959;
  --color-body: #2b2b2b;
  --color-text: #2b2b2b;
  --color-heading: #000;
  --color-white: #fff;
  --color-text-inverse: #fff;
  --color-surface-dark: #000;
  --color-background: #fff;
  --color-surface: #f9f9f9;
  --color-surface-alt: #f0f0f0;
  --color-surface-light: #f9f9f9;

  --color-gray-100: #fafafa;
  --color-gray-200: #f8f8f8;
  --color-gray-300: #f0f0f0;
  --color-gray-400: #eee;
  --color-gray-500: #888;

  --color-success-bg: #e8f5e9;
  --color-success-text: #2e7d32;
  --color-success-border: #66bb6a;
  --color-error-bg: #fce4ec;
  --color-error-text: #c62828;
  --color-error-border: #ef5350;
  --color-warning-bg: #fff3e0;
  --color-warning-text: #e65100;
  --color-warning-border: #ffa726;
  --color-form-error: #d32f2f;
  --color-success-bg-dark: rgba(76, 175, 80, 0.18);
  --color-success-text-dark: #a5d6a7;
  --color-error-bg-dark: rgba(244, 67, 54, 0.15);
  --color-error-text-dark: #ff8a80;
  --color-error-border-dark: #ff8a80;
  --color-rating-star: #f5a623;

  --font-heading: "Montserrat", sans-serif;
  --font-body: "DM Sans", sans-serif;

  --font-size-body: 18px;
  --font-size-body-mobile: 16px;
  --font-size-body-sm: 16px;
  --font-size-caption: 14px;
  --font-size-meta: 13px;
  --font-size-micro: 12px;
  --font-size-tiny: 11px;
  --line-height-body: 1.56;
  --line-height-body-loose: 1.6;
  --font-size-h1: clamp(36px, 6vw, 80px);
  --line-height-h1: 1.15;
  --font-size-h2: clamp(32px, 4vw, 52px);
  --line-height-h2: 1.2;
  --font-size-h2-section: clamp(26px, 3vw, 40px);
  --line-height-h2-section: clamp(34px, 3.5vw, 48px);
  --font-size-h3: clamp(24px, 2.5vw, 32px);
  --line-height-h3: 1.25;
  --font-size-cta: 15px;
  --font-size-h2-mobile: 28px;
  --line-height-h2-mobile: 36px;
  --font-size-h3-mobile: 22px;
  --line-height-h3-mobile: 30px;

  --transition-base: 0.3s ease;

  --divider-width: 60px;
  --divider-height: 3px;

  --space-section-xs: 60px;
  --space-section-sm: 80px;
  --space-section-md: 100px;
  --space-section-lg: 120px;
  --space-section-xl: 150px;
  --section-padding-y: 5rem;

  --header-height: 94px;
  --max-width-container: 1200px;
  --container-max-width: 1200px;
  --max-width-narrow: 900px;

  --shadow-card: 0 8px 30px rgb(from var(--color-surface-dark) r g b / 0.08);
  --shadow-modal: 0 25px 80px rgb(from var(--color-surface-dark) r g b / 0.3);

  --z-skip: 10000;
  --z-lightbox: 9999;
  --z-modal: 2000;
  --z-hamburger: 1001;
  --z-header: 1000;
  --z-nav: 999;
  --z-sticky-cta: 900;

  --focus-ring: 2px solid var(--color-primary);
  --focus-ring-offset: 3px;

  interpolate-size: allow-keywords;
}

@media (max-width: 1024px) {
  :root { --header-height: 76px; }
}