/* === Jost — self-hosted from @fontsource/jost@5.0.13 === */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost/jost-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost/jost-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost/jost-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost/jost-cyrillic-300-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost/jost-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost/jost-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* === Esther Design Tokens ===
 * Source of truth for colors, typography, spacing, breakpoints.
 * Derived from /Design/uploads/colors and font.webp.
 *
 * All component CSS must reference these custom properties.
 * Hard-coded color/spacing values in component CSS are a smell.
 */

:root {
  /* === Colors === */
  --color-bg:          #F5F5F5;
  --color-surface:     #FFFFFF;
  --color-text:        #141415;
  --color-text-muted:  #57585C;
  --color-text-soft:   #87898E;
  --color-border:      #E5E5E7;
  --color-accent:      #4A5D3A;
  --color-accent-ink:  #FFFFFF;
  --color-overlay:     rgb(20 20 21 / 0.5);
  --color-overlay-soft: rgb(20 20 21 / 0.4);
  --color-overlay-light: rgb(20 20 21 / 0.06);
  --shadow-card:       0 8px 32px rgb(20 20 21 / 0.08);
  --shadow-panel:      0 8px 24px rgb(20 20 21 / 0.1);

  /* === Typography === */
  --font-sans:   'Jost', system-ui, -apple-system, sans-serif;
  --fw-light:    300;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Heading scale — fluid using clamp() so it scales with viewport. */
  --fs-h1:    clamp(2.5rem, 5vw + 1rem, 4.5rem);   /* 40-72px */
  --fs-h2:    clamp(1.75rem, 3vw + 1rem, 2.5rem);  /* 28-40px */
  --fs-h3:    1.25rem;                              /* 20px */
  --fs-body:  1rem;                                 /* 16px */
  --fs-small: 0.875rem;                             /* 14px */
  --fs-xs:    0.75rem;                              /* 12px */

  --lh-tight:    1.1;
  --lh-normal:   1.5;
  --tracking-wide: 0.05em;

  /* === Spacing (8pt grid) === */
  --s-1: 0.25rem;  /*  4px */
  --s-2: 0.5rem;   /*  8px */
  --s-3: 0.75rem;  /* 12px */
  --s-4: 1rem;     /* 16px */
  --s-5: 1.5rem;   /* 24px */
  --s-6: 2rem;     /* 32px */
  --s-7: 3rem;     /* 48px */
  --s-8: 4rem;     /* 64px */
  --s-9: 6rem;     /* 96px */

  /* === Layout === */
  --container-max:         1440px;
  --container-pad-mobile:  1rem;
  --container-pad-desktop: 2rem;

  /* === Borders & radii === */
  --radius-sm:     0;
  --radius-button: 0;
  --radius-pill:   999px;

  /* === Transitions === */
  --t-fast: 120ms ease-out;
  --t-base: 200ms ease-out;
  --t-slow: 360ms ease;

  /* === Z-index scale === */
  --z-header:  100;
  --z-modal:   1000;
  --z-tooltip: 2000;
}

/* Breakpoint reference (used in @media queries throughout):
 *   Mobile:  0     - 767px
 *   Tablet:  768   - 1023px
 *   Desktop: 1024+ */

/* Respect user preference: disable transitions for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}