/* spark-landing — design tokens.
   Hodnoty pixel-matched proti živému spark.ai (probed). Prefix .spk- */
:root {
  /* Brand core */
  --spk-navy:     #11216F;   /* dark sections base / deep gradient stop */
  --spk-magenta:  #9B3A63;   /* mid gradient stop */
  --spk-orange:   #F5724C;   /* far gradient stop */
  --spk-blue:     #046FF9;   /* PRIMARY CTA / link / active nav color */
  --spk-blue-ink: #FFFFFF;

  /* Signature gradient — the whole brand identity (navy → magenta → orange) */
  --spk-gradient:      linear-gradient(82.46deg, #11216F -35.98%, #9B3A63 82.6%, #F5724C 206.22%);
  /* Orange→yellow accent gradient — used as background-clip text for highlight words.
     Stops span 0–100% so the gradient is visible across the whole word (narrow accents
     would otherwise sit entirely in the flat <59% zone and look like a single colour). */
  --spk-accent-grad:   linear-gradient(95deg, #F5724C 0%, #FF9A4C 50%, #FFCF56 100%);
  /* Dark navy section gradient (deep navy → magenta-rose), navy-dominant left */
  --spk-gradient-dark: linear-gradient(115deg, #0E1A52 0%, #14246F 42%, #3A2766 78%, #6E2F58 100%);

  /* Surfaces */
  --spk-bg-dark:   #11216F;   /* navy section bg */
  --spk-bg-light:  #FFFFFF;   /* white sections */
  --spk-bg-soft:   #F7F8FB;   /* faint grey */
  --spk-bg-code:   #313131;   /* code block charcoal (probed) */

  /* Ink — light surfaces */
  --spk-ink:        #272727;
  --spk-ink-muted:  #5C5F6B;
  --spk-ink-dim:    #8A8D99;
  --spk-line:       rgba(17, 33, 111, 0.10);

  /* Ink — dark surfaces */
  --spk-ink-on-dark:       #FFFFFF;
  --spk-ink-on-dark-muted: rgba(255, 255, 255, 0.74);
  --spk-ink-on-dark-dim:   rgba(255, 255, 255, 0.45);
  --spk-line-on-dark:      rgba(255, 255, 255, 0.16);

  /* Typography */
  --spk-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --spk-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --spk-font-mono:    'Inconsolata', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (spark.ai probed @ desktop). Headings weight 500. */
  --spk-fs-h1: 76px;      --spk-lh-h1: 91.2px;   --spk-ls-h1: -1.9px;
  --spk-fs-h2: 57px;      --spk-lh-h2: 68.4px;   --spk-ls-h2: -1.425px;
  --spk-fs-h2md: 41.4px;  --spk-lh-h2md: 49.68px;--spk-ls-h2md: -1.035px;
  --spk-fs-h3: 30px;      --spk-lh-h3: 38px;     --spk-ls-h3: -0.6px;
  --spk-fs-lead: 20px;    --spk-lh-lead: 30px;
  --spk-fs-body: 16px;    --spk-lh-body: 26px;
  --spk-fs-small: 15px;   --spk-lh-small: 23px;

  /* Spacing */
  --spk-s-4: 4px;   --spk-s-8: 8px;   --spk-s-12: 12px; --spk-s-16: 16px;
  --spk-s-20: 20px; --spk-s-24: 24px; --spk-s-32: 32px; --spk-s-40: 40px;
  --spk-s-48: 48px; --spk-s-56: 56px; --spk-s-64: 64px; --spk-s-80: 80px;
  --spk-s-96: 96px; --spk-s-120: 120px; --spk-s-160: 160px;

  /* Layout */
  --spk-container: 1280px;
  --spk-container-narrow: 920px;
  --spk-header-h:        94px;   /* top state */
  --spk-header-h-sticky: 72px;   /* scrolled state */

  /* Radii (probed) */
  --spk-r-panel: 25px;   /* hero bottom + sticky header bottom + tiles */
  --spk-r-code:  32px;   /* code box + mission box */
  --spk-r-card:  18px;   /* white solution cards / resource cards */
  --spk-r-grad:  12px;   /* gradient cards / step cards */
  --spk-r-pill:  95px;

  /* Shadow */
  --spk-shadow-card: 0 18px 40px -18px rgba(17, 33, 111, 0.28);
  --spk-shadow-soft: 0 10px 30px -16px rgba(17, 33, 111, 0.18);
  --spk-shadow-grad: 0 24px 48px -22px rgba(17, 33, 111, 0.45);

  /* z-index */
  --spk-z-header:  100;
  --spk-z-overlay: 200;

  /* Motion */
  --spk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --spk-dur-quick: 180ms;
  --spk-dur-base:  280ms;
  --spk-dur-slow:  520ms;
}

/* keep the one-line hero headline fitting through the desktop band */
@media (max-width: 1320px) {
  :root { --spk-fs-h1: 62px; --spk-lh-h1: 74px; --spk-ls-h1: -1.4px; }
}

@media (max-width: 1023px) {
  :root {
    --spk-fs-h1: 52px;   --spk-lh-h1: 58px;   --spk-ls-h1: -1.2px;
    --spk-fs-h2: 40px;   --spk-lh-h2: 47px;   --spk-ls-h2: -1px;
    --spk-fs-h2md: 32px; --spk-lh-h2md: 39px;
    --spk-fs-h3: 24px;   --spk-lh-h3: 30px;
  }
}

@media (max-width: 600px) {
  :root {
    --spk-fs-h1: 40px;   --spk-lh-h1: 45px;   --spk-ls-h1: -0.8px;
    --spk-fs-h2: 31px;   --spk-lh-h2: 37px;
    --spk-fs-h2md: 27px; --spk-lh-h2md: 33px;
    --spk-fs-lead: 18px; --spk-lh-lead: 27px;
  }
}