/* ===========================================================================
   Mira Life reconstruction: design tokens

   Every value in this file is now MEASURED from the live reference in Chrome
   (computed styles and Elementor's own global custom properties), not guessed.
   Where a value is still an estimate it says so explicitly.
   =========================================================================== */

:root {
  /* ---------------------------------------------------------------- palette
     Read from Elementor's --e-global-color-* definitions on the live site. */
  --ink: #17181c;            /* e-global primary + secondary, body text */
  --black: #000000;          /* background of 10 of the 17 sections */
  --white: #ffffff;
  --grey: #969ea6;           /* e-global 8909da4: body copy on dark, and the
                                de-emphasised half of a two-tone heading */
  --text: #31404fb3;         /* e-global text: #31404F at 70%, copy on light */
  --accent: #0b84fe;         /* e-global accent: the brand blue */
  --link: #0171e3;           /* computed colour of header nav links */
  --faint: #14283c0d;        /* e-global 17f66ca: hairline fills on light */
  --near-black: #0a0a0a;     /* e-global 11bda14 */

  /* Derived, for surfaces the reference composites rather than declares */
  --on-dark: #ffffff;
  /* The light bands are a tinted off-white, not pure white. On #fff a white
     card has no edge at all: every panel on the page was floating in an
     invisible box. The cards stay --white, so now they read as raised. */
  --surface: #e9ebee;   /* neutral and a shade darker, so white cards have an edge */
  --hero-surface: var(--surface);
  --brand: #5a5ed8;          /* the app's own action colour, sampled from the
                                Explore flights button in the Wallet screen */
  --brand-ink: #ffffff;
  --brand-hover: #4a4ecb;
  --on-dark-dim: var(--grey);
  --btn-ghost-bg: rgba(40, 46, 52, 0.5);   /* measured on the hero's second button */
  --btn-ghost-fg: rgba(255, 255, 255, 0.97);
  --accent-soft: rgba(11, 132, 254, 0.12); /* ESTIMATE: the eyebrow pill fill */
  --hairline-dark: rgba(255, 255, 255, 0.1);  /* ESTIMATE */
  --hairline-light: rgba(23, 24, 28, 0.11);

  /* ------------------------------------------------------------- typography
     Inter, self-hosted on the reference as Inter 18pt; shipped here as the
     OFL Google Fonts build with Cyrillic subsets. */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Measured sizes. The reference does not fluid-scale these; it swaps them at
     breakpoints, so the clamps below are this build's responsive handling and
     the desktop end of each clamp is the measured value. */
  --fs-h1: clamp(2rem, 1.25rem + 2.4vw, 3.25rem);      /* 52px measured */
  --lh-h1: 1.1;                                         /* 57.2 / 52 */
  --fs-h2: clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem);   /* 36px measured */
  --lh-h2: 1.2;                                         /* 43.2 / 36 */
  --fs-h3: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);       /* 32px measured */
  --lh-h3: 1.2;                                         /* measured 1.2em */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /* 20px measured */
  --lh-lead: 1.6;                                       /* 32 / 20 */
  --fs-body: 1rem;                                      /* 16px measured */
  --lh-body: 1.6;                                       /* 25.6 / 16 */
  --fs-list: 17px;                                      /* measured */
  --lh-list: 21px;                                      /* measured */
  --fs-eyebrow: 0.875rem;                               /* 14px measured, w700 */
  --fs-small: 0.875rem;

  /* ----------------------------------------------------------------- layout
     Content widths are the reference's own --content-width values. */
  --content: 1440px;         /* min(100%, 1440px) on most sections */
  --content-mid: 1200px;     /* section 14 */
  --content-narrow: 1120px;  /* sections 3 and 4 */
  --gutter: clamp(16px, 3vw, 40px);
  --section-y: 96px;         /* the reference's standard block padding */
  --section-y-lg: 190px;     /* used where a pinned block needs lead-in */
  --hero-y: 100px;
  --header-h: 72px;          /* measured */

  /* ------------------------------------------------------------------ shape */
  --radius-btn: 50px;        /* measured on every button */
  --radius-card: 20px;       /* ESTIMATE */
  --radius-media: 24px;      /* ESTIMATE */
  --btn-pad-y: 14px;         /* measured */
  --btn-pad-x: 20px;         /* measured */

  /* ------------------------------------------------------------------ motion
     The reference drives these from ks-script.js, which has not been read.
     Durations and easings below are this build's own. */
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --counter-duration: 2000ms; /* measured from the counter widget's data-duration */
}