/* ============================================================
   KINEVO — Design Tokens (CSS Layer)
   Derived from: tokens.json
   Two-layer pattern: tokens.json (single source) -> tokens.css (CSS vars)
   DO NOT consume hardcoded values in style.css — always use var(--token).
   ============================================================ */

:root {
  /* ----- COLOR · RAW (exact brand palette, no custom variations) ----- */
  --c-raw-albastru-inchis:  #0B3D91;
  --c-raw-albastru-calm:    #1E90FF;
  --c-raw-turcoaz-deschis:  #40E0D0;
  --c-raw-verde-proaspat:   #92BD47;
  --c-raw-gri-neutru:       #A9A9A9;
  --c-raw-alb-curat:        #FFFFFF;
  --c-raw-ink:              #0F1B2D;
  --c-raw-ink-soft:         #5B6B80;
  --c-raw-line:             #E3E8EF;
  --c-raw-bg-soft:          #F5F8FC;
  --c-raw-bg-tint:          #EAF3FB;
  --c-raw-danger:           #D33A3A;
  --c-raw-star:             #FFB400;

  /* ----- COLOR · SEMANTIC (alias to raw) ----- */
  --c-primary:        var(--c-raw-albastru-inchis);
  --c-primary-soft:   var(--c-raw-albastru-calm);
  --c-accent:         var(--c-raw-turcoaz-deschis);
  --c-success:        var(--c-raw-verde-proaspat);
  --c-ink:            var(--c-raw-ink);
  --c-ink-muted:      var(--c-raw-ink-soft);
  --c-line:           var(--c-raw-line);
  --c-bg:             var(--c-raw-alb-curat);
  --c-bg-soft:        var(--c-raw-bg-soft);
  --c-bg-tint:        var(--c-raw-bg-tint);
  --c-banner-bg:      var(--c-raw-turcoaz-deschis);
  --c-danger:         var(--c-raw-danger);

  /* ----- COLOR · ALPHA ----- */
  --c-primary-06:   rgba(11, 61, 145, 0.06);
  --c-primary-10:   rgba(11, 61, 145, 0.10);
  --c-primary-15:   rgba(11, 61, 145, 0.15);
  --c-primary-25:   rgba(11, 61, 145, 0.25);
  --c-soft-12:      rgba(30, 144, 255, 0.12);
  --c-accent-15:    rgba(64, 224, 208, 0.15);
  --c-ink-60:       rgba(15, 27, 45, 0.6);
  --c-ink-80:       rgba(15, 27, 45, 0.8);
  --c-white-10:     rgba(255, 255, 255, 0.10);
  --c-white-25:     rgba(255, 255, 255, 0.25);
  --c-white-85:     rgba(255, 255, 255, 0.85);
  --c-white-94:     rgba(255, 255, 255, 0.94);
  --c-overlay-dark:       rgba(11, 25, 45, 0.55);
  --c-overlay-grad-start: rgba(11, 25, 45, 0.15);
  --c-overlay-grad-end:   rgba(11, 25, 45, 0.85);

  /* ----- COLOR · GRADIENTS ----- */
  --grad-brand:    linear-gradient(135deg, #0B3D91 0%, #1E90FF 60%, #40E0D0 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(11,61,145,.06), rgba(30,144,255,.06), rgba(64,224,208,.10));
  --grad-hero:     linear-gradient(180deg, #FBFDFF 0%, #FFFFFF 100%);
  --grad-contact:  linear-gradient(180deg, #F5F8FC 0%, #FFFFFF 100%);
  --grad-overlay:  linear-gradient(180deg, var(--c-overlay-grad-start) 0%, var(--c-overlay-grad-end) 100%);

  /* ----- COLOR · GRADIENTS · per-slide (consumed by HeroSelector molecule) ----- */
  --g-genunchi:  linear-gradient(135deg, var(--c-raw-albastru-inchis) 0%, var(--c-raw-albastru-calm) 100%);
  --g-coloana:   linear-gradient(135deg, var(--c-raw-albastru-calm) 0%, var(--c-raw-turcoaz-deschis) 100%);
  --g-mana:      linear-gradient(135deg, var(--c-raw-albastru-inchis) 0%, var(--c-raw-turcoaz-deschis) 100%);
  --g-glezna:    linear-gradient(135deg, var(--c-raw-albastru-calm) 0%, var(--c-raw-albastru-inchis) 100%);
  --g-umar:      linear-gradient(135deg, var(--c-raw-turcoaz-deschis) 0%, var(--c-raw-albastru-calm) 100%);
  --g-sport:     linear-gradient(135deg, var(--c-raw-albastru-inchis) 0%, var(--c-raw-verde-proaspat) 100%);
  --g-pediatric: linear-gradient(135deg, var(--c-raw-turcoaz-deschis) 0%, var(--c-raw-verde-proaspat) 100%);
  --g-masaj:     linear-gradient(135deg, var(--c-raw-albastru-calm) 0%, var(--c-raw-turcoaz-deschis) 100%);

  /* ----- SPACING ----- */
  --s-0:  0px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ----- RADIUS ----- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ----- SHADOW ----- */
  --sh-sm:  0 1px 2px rgba(11, 61, 145, 0.06), 0 2px 4px rgba(11, 61, 145, 0.04);
  --sh-md:  0 6px 18px rgba(11, 61, 145, 0.08), 0 2px 6px rgba(11, 61, 145, 0.05);
  --sh-lg:  0 24px 60px rgba(11, 61, 145, 0.15), 0 8px 18px rgba(11, 61, 145, 0.07);
  --sh-ring:0 0 0 4px rgba(30, 144, 255, 0.18);
  --sh-glow:0 30px 60px rgba(11, 61, 145, 0.25);

  /* ----- TYPOGRAPHY · FONT-FAMILY ----- */
  --ff-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ----- TYPOGRAPHY · FONT-SIZE ----- */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  clamp(1.75rem, 3vw, 2.5rem);
  --fs-4xl:  clamp(2rem, 4vw, 3rem);
  --fs-5xl:  clamp(2.25rem, 4.5vw, 3.75rem);

  /* ----- TYPOGRAPHY · WEIGHT ----- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ----- TYPOGRAPHY · LINE-HEIGHT ----- */
  --lh-tight:   1.18;
  --lh-snug:    1.32;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* ----- TYPOGRAPHY · LETTER-SPACING ----- */
  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.12em;
  --ls-widest: 0.14em;

  /* ----- MOTION ----- */
  --d-instant: 100ms;
  --d-fast:    200ms;
  --d-normal:  300ms;
  --d-slow:    500ms;
  --d-lazy:    700ms;

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;

  /* ----- Z-INDEX ----- */
  --z-base:     0;
  --z-elevated: 10;
  --z-sticky:   20;
  --z-dropdown: 30;
  --z-overlay:  40;
  --z-modal:    50;
  --z-toast:    60;

  /* ----- LAYOUT ----- */
  --container-max: 1180px;
  --container-w:   92%;
  --header-h:      78px;
  --section-py:    clamp(3.5rem, 7vw, 6rem);

  /* ============================================================
     MOLECULE-LEVEL TOKENS (composed from semantic + atoms)
     Each molecule binds the tokens it consumes. Components NEVER
     reach below molecule tokens — only molecules can resolve to
     semantic/raw. This mirrors Luna's tokens_json sub-keys pattern.
     ============================================================ */

  /* --- molecule.banner — turcoaz_deschis bg + dark text (WCAG AA) --- */
  --m-banner-bg:           var(--c-banner-bg);
  --m-banner-ink:          var(--c-primary);
  --m-banner-icon-circle:  rgba(11, 61, 145, 0.15);
  --m-banner-logo-panel:   var(--c-bg);
  --m-banner-logo-ink:     var(--c-primary);
  --m-banner-pad-y:        var(--s-3);
  --m-banner-pad-x:        var(--s-6);

  /* --- molecule.hero_selector --- */
  --m-hs-container-radius: var(--r-xl);
  --m-hs-container-shadow: var(--sh-lg);
  --m-hs-overlay-grad:     var(--grad-overlay);
  /* Text widget — pure white solid (matches controllers strip) */
  --m-hs-text-bg:          var(--c-bg);
  --m-hs-text-border:      transparent;
  --m-hs-text-blur:        none;
  --m-hs-text-ink:         var(--c-ink);
  --m-hs-text-ink-muted:   var(--c-ink-muted);
  --m-hs-text-eyebrow-ink: var(--c-primary-soft);
  --m-hs-ctrl-bg:          var(--c-bg);
  --m-hs-ctrl-active-bg:   var(--c-primary);
  --m-hs-ctrl-active-ink:  var(--c-bg);
  --m-hs-ctrl-inactive-ink:var(--c-ink-muted);
  --m-hs-dot-size:         10px;
  --m-hs-dot-active-w:     32px;
  --m-hs-equip-card-radius:var(--r-lg);

  /* equip card — glass widget over photo bg */
  --m-hs-equip-glass-bg:     rgba(255, 255, 255, 0.14);
  --m-hs-equip-glass-blur:   saturate(180%) blur(20px);
  --m-hs-equip-glass-border: rgba(255, 255, 255, 0.20);
  --m-hs-equip-body-bg:      rgba(255, 255, 255, 0.08);
  --m-hs-equip-name-ink:     var(--c-bg);
  --m-hs-equip-desc-ink:     var(--c-white-85);
  --m-hs-equip-tag-primary-bg:    var(--c-primary);
  --m-hs-equip-tag-primary-ink:   var(--c-bg);
  --m-hs-equip-tag-secondary-bg:  rgba(255, 255, 255, 0.85);
  --m-hs-equip-tag-secondary-ink: var(--c-primary);

  /* --- molecule.service_card --- */
  --m-svc-bg:        var(--c-bg);
  --m-svc-border:    var(--c-line);
  --m-svc-icon-bg:   var(--c-bg-tint);
  --m-svc-icon-fg:   var(--c-primary);
  --m-svc-radius:    var(--r-lg);
  --m-svc-shadow:    var(--sh-sm);
  --m-svc-shadow-hover: var(--sh-lg);

  /* --- molecule.button — primary: albastru calm + alb (per Andrei) --- */
  --m-btn-primary-bg:    var(--c-raw-albastru-calm);
  --m-btn-primary-ink:   var(--c-raw-alb-curat);
  --m-btn-primary-hover: var(--c-raw-albastru-inchis);
  --m-btn-ghost-border:  var(--c-raw-albastru-calm);
  --m-btn-ghost-ink:     var(--c-raw-albastru-calm);
  --m-btn-radius:        var(--r-pill);

  /* --- molecule.header --- */
  --m-hdr-h:             var(--header-h);
  --m-hdr-bg:            rgba(255, 255, 255, 0.85);
  --m-hdr-bg-scrolled:   rgba(255, 255, 255, 0.95);
  --m-hdr-blur:          saturate(180%) blur(14px);

  /* --- molecule.team_card --- */
  --m-team-bg:        var(--c-bg);
  --m-team-radius:    var(--r-lg);
  --m-team-photo-bg:  var(--grad-brand);
  --m-team-role-ink:  var(--c-primary-soft);

  /* --- molecule.check_list — albastru calm (per Andrei) --- */
  --m-check-bg:       var(--c-raw-albastru-calm);
  --m-check-ink:      var(--c-raw-alb-curat);

  /* --- molecule.timeline / roadmap — verde proaspat (per Andrei) --- */
  --m-timeline-accent:     var(--c-raw-verde-proaspat);
  --m-timeline-accent-ink: var(--c-raw-alb-curat);
}

/* ============================================================
   Reduced motion override — semantic, not raw.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 0.01ms;
    --d-fast:    0.01ms;
    --d-normal:  0.01ms;
    --d-slow:    0.01ms;
    --d-lazy:    0.01ms;
  }
}