/* ==========================================================================
   Estiva Design System — CSS Variables
   Source: Figma Style Guide (Colors + Typography)
   ========================================================================== */

:root {
  /* —— Brand colors —— */
  --color-white: #ffffff;
  --color-beige: #f5f3ef;
  --color-gold: #c2b49a;
  --color-dark: #363732;
  --color-charcoal: #2c292e;

  /* —— Neutrals —— */
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #cccccc;
  --color-gray-400: #999999;
  --color-gray-500: #666666;

  /* —— Semantic tokens —— */
  --bg-page: var(--color-beige);
  --bg-surface: var(--color-white);
  --bg-accent: var(--color-gold);
  --bg-panel: #c2b49a;
  --text-primary: var(--color-dark);
  --text-secondary: var(--color-charcoal);
  --text-muted: var(--color-gray-500);
  --text-on-dark: var(--color-white);
  --text-on-accent: var(--color-white);
  --border-subtle: rgba(0, 0, 0, 0.1);
  --border-on-dark: var(--color-white);

  /* —— Typography families —— */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Instrument Serif (Latin) + Source Serif 4 (Cyrillic) aliased in fonts.css */
  --font-serif: "Instrument Serif", "Georgia", "Times New Roman", serif;

  /* —— Fluid type scale (mobile → desktop) —— */
  --fs-h1: clamp(2.5rem, 1.8rem + 3.5vw, 4.75rem); /* 40 → 76 */
  --fs-h2-serif: clamp(2.25rem, 1.7rem + 2.75vw, 4rem); /* 36 → 64 */
  --fs-h2: clamp(2rem, 1.4rem + 3vw, 3.875rem); /* 32 → 62 */
  --fs-h3: clamp(1.75rem, 1.35rem + 2vw, 3rem); /* 28 → 48 */
  --fs-h4: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem); /* 24 → 36 */
  --fs-body-l: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 18 → 20 */
  --fs-body-m: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18 */
  --fs-body-s: clamp(0.875rem, 0.825rem + 0.25vw, 1rem); /* 14 → 16 */
  --fs-caption: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12 → 14 */
  --fs-btn: 1rem; /* 16 */
  --fs-nav: 0.875rem; /* 14 */

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.5;
  --lh-body-m: 1.4;
  --lh-btn: 1.22;

  --ls-h1: clamp(-0.094rem, -0.04rem - 0.15vw, -0.19rem);
  --ls-h2: clamp(-0.094rem, -0.04rem - 0.12vw, -0.186rem);
  --ls-h3: clamp(-0.0625rem, -0.03rem - 0.1vw, -0.144rem);

  /* —— Layout: full-bleed page, only side padding (no hard column max) —— */
  --page-max: none;
  --content-max: 100%;
  --page-pad-x: clamp(1.25rem, 2.2vw, 3rem);
  --page-pad-y: clamp(1rem, 0.65rem + 1.4vw, 2rem);
  --header-height: 4.8125rem; /* ~77px — matches .site-header */
  --section-gap: 1.5rem; /* 24px — fixed between sections */
  --space-block: clamp(2.5rem, 2rem + 1.5vw, 3.4375rem); /* → 55px */
  --space-block-sm: 2rem; /* 32px */
  --space-block-xs: 0.75rem; /* 12px */
  /* Split rows: label 464 / copy 904 on 1368 canvas */
  --split-label: 464fr;
  --split-copy: 904fr;
  --radius-card: 17px;
  --radius-pill: 38px;
  --radius-faq: 24px;

  /* —— Motion —— */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;

  /* —— Focus —— */
  --focus-ring: 2px solid var(--color-gold);
  --focus-offset: 3px;

  /* —— Shadows (subtle, non-decorative) —— */
  --shadow-none: none;
}