/* ==========================================================================
   TOKENS — extracted from Figma "Danas Trening site"
   Frames: 2:3 (Home Desktop) and 115:46 (O nama Desktop)
   Every value here is read from the file, not eyeballed.
   ========================================================================== */

:root {
  /* --- Brand color -------------------------------------------------------
     No color variables exist in the file, only raw fills. These three hues
     plus their 25% alpha tints are the entire palette.                     */
  --c-coral: #e99485;
  --c-yellow: #f4bb18;
  --c-mint: #a5cda0;

  --c-coral-25: rgb(233 148 133 / 0.25);
  --c-yellow-25: rgb(244 187 24 / 0.25);
  --c-mint-25: rgb(165 205 160 / 0.25);

  /* Figma uses both #000 and #0A0A0A for text, inconsistently. Both kept. */
  --c-ink: #000000;
  --c-ink-soft: #0a0a0a;
  --c-surface: #ffffff;
  --c-placeholder-border: rgb(10 10 10 / 0.25);

  /* --- Typography --------------------------------------------------------
     Named Figma text styles:
       H2            Raleway ExtraBold 48 - 100%
       H3            Raleway Bold      28 - 100%
       Button text   Raleway Bold      24 - 100%
       Body text     Lato    Regular   24 / 32   <- was 20/32 before this revision
       Testimonials  Lato    SemiBold  16 - 100%
       contact text  Lato    Bold      18 / 30
     H1 is no longer a named style - it is inline Raleway ExtraBold 56 with
     leading-none on both frames, which confirms the 100% reading.          */
  --ff-display: "Raleway", system-ui, sans-serif;
  --ff-body: "Lato", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Fluid below 1200px, exact Figma pixel values at and above it. */
  --fs-h1: clamp(2.25rem, 1.55rem + 3.5vw, 3.5rem);       /* -> 56px */
  --fs-h2: clamp(2rem, 1.6rem + 2vw, 3rem);               /* -> 48px */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);     /* -> 28px */
  --fs-danas: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);    /* -> 40px */
  --fs-stat: clamp(2.5rem, 1.9rem + 3vw, 3.5rem);         /* -> 56px */
  --fs-stat-heading: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem); /* -> 36px */
  --fs-body: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);   /* -> 24px */
  --fs-btn: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);    /* -> 24px */
  --fs-tagline: 1.25rem;                                   /* 20px */
  --fs-contact: 1.125rem;                                  /* 18px */
  --fs-small: 1rem;                                        /* 16px */
  --fs-eyebrow: 1rem;                                      /* 16px */

  --ls-eyebrow: 1.28px;

  /* All "100" line-height tokens read as 100%, per your call. Raised below
     1200px, where headings wrap and 1.0 leading would collide. */
  --lh-heading: 1;
  --lh-name: 1.1;
  --lh-body: 1.6;
  --lh-hero-sub: 1.4;
  --lh-role: 28px;
  --lh-tagline: 20px;
  --lh-contact: 30px;
  --lh-42: 42px;
  --lh-40: 40px;

  /* --- Spacing ----------------------------------------------------------- */
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-15: 15px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-25: 25px;
  --sp-30: 30px;
  --sp-32: 32px;
  --sp-36: 36px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-58: 58px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;

  /* --- Layout ------------------------------------------------------------ */
  --container: 1200px;
  --gutter: 20px;

  /* Section gap differs per frame: 12px on Home, 32px on O nama. Each page
     stylesheet sets its own - flagged as a possible slip in one of them. */
  --section-gap: var(--sp-32);

  /* --- Radius ------------------------------------------------------------ */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 24px;
  --r-pill: 9999px;

  /* --- Borders ----------------------------------------------------------- */
  --bw-schedule: 3px;
  --bw-stat: 5px;
  --underline-w: 3px;

  /* --- Motion ------------------------------------------------------------ */
  --t-fast: 150ms ease;
}

/* No shadows are defined because neither Figma frame contains any. */

@media (min-width: 600px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }
@media (min-width: 1440px) { :root { --gutter: 120px; } }

@media (max-width: 1199px) {
  :root { --lh-heading: 1.15; --lh-42: 1.2; --lh-40: 1.3; }
}