/*
 * Design tokens. The single place where the site's colours, fonts and
 * measures are named. Values come from the old Elementor kit (post 9) and
 * from computed styles measured on the live site, so the rebuilt site
 * matches it. Every other stylesheet uses these variables and never
 * repeats a raw value.
 *
 * Breakpoints (media queries cannot use variables):
 *   phone   up to 767px
 *   tablet  768px to 1024px
 *   desktop 1025px and up
 * The size tokens below change at those breakpoints, so components only
 * name the token and get the right size at every width.
 */
:root {
  /* Colour */
  --yb-color-primary: #006aa6;        /* brand blue as the live site renders it (the kit's #0080c8, darkened for contrast by the old site-polish plugin): headings, buttons, links */
  --yb-color-primary-hover: #005d94;
  --yb-color-primary-kit: #0080c8;    /* the kit's original blue; a few decorative surfaces still use it */
  --yb-color-primary-light: #28ade2;  /* light blue: highlighted words in headings */
  --yb-color-cyan-dark: #0f7193;      /* highlighted words on pale backgrounds (footer) */
  --yb-color-accent: #feef00;         /* brand yellow */
  --yb-color-surface: #f8f9fa;        /* pale section and card background */
  --yb-color-white: #ffffff;
  --yb-color-black: #000000;
  --yb-color-text: rgb(0 0 0 / 80%); /* body text */
  --yb-color-muted: #7e7e7e;          /* secondary text */
  --yb-color-border: rgb(0 0 0 / 10%);
  --yb-color-overlay: rgb(0 0 0 / 80%);
  --yb-color-backdrop: rgb(0 0 0 / 30%);          /* behind open popups */
  --yb-color-glass: rgb(255 255 255 / 80%);       /* blurred header and card backdrops */
  --yb-color-glass-faint: rgb(255 255 255 / 20%);
  --yb-blur-glass: saturate(1.8) blur(40px);

  /* Type */
  --yb-font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --yb-font-link: "Poppins", var(--yb-font-body);
  --yb-weight-regular: 400;
  --yb-weight-medium: 500;

  /* Type sizes: desktop values; tablet and phone values follow below. */
  --yb-size-h1: 52px;
  --yb-size-h2: 48px;
  --yb-size-h3: 30px;
  --yb-size-h4: 22px;
  --yb-size-h5: 20px;
  --yb-size-h6: 18px;
  --yb-size-body: 16px;
  --yb-size-body-l: 18px;
  --yb-size-body-s: 14px;
  --yb-size-lead: 20px;       /* page subtitles, quotes */
  --yb-size-menu: 15px;
  --yb-size-button: 15px;
  --yb-size-tag: 11px;        /* small uppercase pill labels ("KIRJUTA MEILE") */
  --yb-leading-h1: 1.1;
  --yb-leading-h2: 1.2;
  --yb-leading-tight: 1.2;
  --yb-leading-h4: 1.3;
  --yb-leading-body: 1.4;
  --yb-leading-lead: 1.5;
  --yb-tracking-h2: -0.5px;
  --yb-tracking-h6: -0.4px;
  --yb-tracking-menu: -0.5px;
  --yb-tracking-button: -0.2px;
  --yb-tracking-body-l: -0.2px;

  /* Space */
  --yb-space-2xs: 5px;
  --yb-space-xs: 10px;
  --yb-space-s: 15px;
  --yb-space-m: 20px;
  --yb-space-l: 30px;
  --yb-space-xl: 50px;
  --yb-space-2xl: 64px;
  --yb-space-section: 108px;  /* vertical gap between page sections */
  --yb-gutter: 30px;          /* side padding of full-width sections */
  --yb-edge: 10px;            /* inset of the big rounded page panels from the window edge */

  /* Width */
  --yb-width-content: 1140px; /* the boxed content column */
  --yb-width-narrow: 800px;   /* long-form text */
  --yb-width-dialog: 550px;
  --yb-width-panel: 390px;    /* side panel popup */

  /* Radius */
  --yb-radius-panel: 24px;    /* big page panels, cards with images */
  --yb-radius-card: 16px;
  --yb-radius-field: 8px;
  --yb-radius-pill: 100px;

  /* Chrome */
  --yb-header-height: 80px;
  --yb-logo-width: 140px;
  --yb-icon-button: 48px;     /* round header buttons */
  --yb-shadow-dropdown: 0 20px 40px rgb(0 0 0 / 8%);
}

@media (max-width: 1024px) {
  :root {
    --yb-size-h1: 38px;
    --yb-size-h2: 34px;
    --yb-size-h3: 23px;
    --yb-size-h4: 20px;
    --yb-size-h5: 18px;
    --yb-size-h6: 16px;
    --yb-space-section: 80px;
    --yb-gutter: 20px;
    --yb-header-height: 93px;
    --yb-icon-button: 46px;
  }
}

@media (max-width: 767px) {
  :root {
    --yb-size-h1: 32px;
    --yb-size-h2: 28px;
    --yb-size-h3: 21px;
    --yb-size-h4: 19px;
    --yb-size-h5: 17px;
    --yb-size-h6: 15px;
    --yb-leading-h1: 1.2;
    --yb-leading-h2: 1.3;
    --yb-space-section: 64px;
    --yb-header-height: 88px;
    --yb-logo-width: 130px;
  }
}