/* ============================================================================
   SIRO Design Tokens
   Source: V3 - /v3/assets/site.css :root + observed values across 22 pages
   Loaded: frontend (wp_enqueue_scripts) and Elementor preview iframe only.
   Do not enqueue in the Elementor editor shell; it shares the DOM with form
   controls and breaks WYSIWYG contrast. See siro-child functions.php.
   Consumers: Elementor Global Colors/Fonts (inc/elementor-globals.php),
              siro-site-kit widget CSS, theme-level overrides.css.
   Rule: NEVER hardcode color/spacing/radius/font values in widgets. Use a token.
   ============================================================================ */

:root {
  /* ---- Brand colors --------------------------------------------------- */
  --siro-color-primary:        #00377e;       /* navy */
  --siro-color-primary-dark:   #002659;       /* navy-dark, used in gradients */
  --siro-color-accent:         #c29b27;       /* gold (CTA) */
  --siro-color-yellow:         #fdd400;       /* secondary highlight */

  /* ---- Surfaces ------------------------------------------------------- */
  --siro-bg:                   #fbfaf8;       /* page bg cream */
  --siro-surface:              #ffffff;       /* card/panel surface */
  --siro-surface-low:          #f2f4f6;       /* low-elevation surface */
  --siro-surface-dim:          #e5e8ec;       /* dim surface */

  /* ---- Text ----------------------------------------------------------- */
  --siro-text:                 #191c1e;       /* main text */
  --siro-text-muted:           #6a7080;       /* muted text */
  --siro-text-inverse:         #ffffff;       /* on dark bg */
  /* Breadcrumbs / small nav on navy: brighter than muted (0.7) for readability on #00377e */
  --siro-text-inverse-soft:    rgba(255, 255, 255, 0.92);
  --siro-text-inverse-muted:   rgba(255, 255, 255, 0.7);

  /* ---- Borders / outlines -------------------------------------------- */
  --siro-outline:              rgba(195, 198, 211, 0.2);
  --siro-outline-strong:       rgba(195, 198, 211, 0.5);
  --siro-outline-dark:         rgba(25, 28, 30, 0.1);

  /* ---- Typography ----------------------------------------------------- */
  --siro-font-display:         'Plus Jakarta Sans', sans-serif;     /* h1-h6, hero — swapped from Manrope 2026-05-17 for cleaner Romanian diacritics */
  --siro-font-body:            'Inter',   sans-serif;     /* body, UI */
  --siro-font-heading-weight:  800;
  --siro-font-heading-tracking: -0.01em;
  --siro-font-heading-leading: 1.1;
  --siro-font-body-leading:    1.6;

  /* Fluid type scale - reads close to V3's observed sizes */
  --siro-fs-xs:   12px;
  --siro-fs-sm:   14px;
  --siro-fs-base: 16px;
  --siro-fs-md:   17px;
  --siro-fs-lg:   18px;
  --siro-fs-xl:   20px;
  --siro-fs-2xl:  24px;
  --siro-fs-3xl:  28px;
  --siro-fs-4xl:  32px;
  --siro-fs-5xl:  40px;
  --siro-fs-h2:   clamp(28px, 3vw, 40px);
  --siro-fs-h1:   clamp(36px, 5vw, 64px);
  /* Matches V3 .hero-content h1 + siro-hero__title */
  --siro-fs-hero: clamp(40px, 5vw, 72px);
  /* V3 .section-title */
  --siro-fs-section-title: clamp(32px, 4vw, 48px);

  /* ---- Spacing scale (4px base, derived from V3 observed values) ----- */
  --siro-space-1:   4px;
  --siro-space-2:   8px;
  --siro-space-3:  12px;
  --siro-space-4:  16px;
  --siro-space-5:  20px;
  --siro-space-6:  24px;
  --siro-space-7:  28px;     /* card padding */
  --siro-space-8:  32px;
  --siro-space-9:  40px;
  --siro-space-10: 48px;     /* navbar + section h padding */
  --siro-space-11: 56px;
  --siro-space-12: 64px;
  --siro-space-13: 80px;     /* section vertical padding (mobile) */
  --siro-space-14: 100px;    /* section vertical padding */
  --siro-space-15: 120px;    /* hero vertical padding */
  /* Irregulars used by V3 (kept tokenised so widgets don't hardcode) */
  --siro-space-btn-y:    14px;
  --siro-space-btn-x:    28px;
  --siro-space-input-y:  14px;

  /* ---- Radii ---------------------------------------------------------- */
  --siro-radius-sm:  4px;
  --siro-radius-md:  8px;
  --siro-radius-lg: 16px;

  /* ---- Elevation / shadows ------------------------------------------- */
  --siro-shadow-ambient:  0 24px 48px rgba(25, 28, 30, 0.06);
  --siro-shadow-hover:    0 32px 64px rgba(25, 28, 30, 0.10);
  --siro-shadow-cta-gold: 0 12px 25px rgba(194, 155, 64, 0.30);
  --siro-shadow-cta-navy: 0 12px 25px rgba(0, 55, 126, 0.30);
  --siro-glass:           rgba(25, 28, 30, 0.5);
  --siro-glass-bright:    rgba(255, 255, 255, 0.92); /* navbar bg */
  /* Hero calculator panel (V3 .hero-calculator - frosted light on navy, not dark glass) */
  --siro-glass-hero-calc-bg:     rgba(255, 255, 255, 0.05);
  --siro-glass-hero-calc-border: rgba(255, 255, 255, 0.10);
  --siro-blur-hero-calc:         24px;
  /* Sub-hero decorative accent (V3 .sub-hero::after) */
  --siro-sub-hero-accent-glow:   rgba(194, 155, 39, 0.18);
  /* Eyebrow pill on navy (V3 .sub-hero .eyebrow) */
  --siro-eyebrow-pill-bg:        rgba(253, 212, 0, 0.15);

  /* ---- Transitions / motion ------------------------------------------ */
  --siro-trans-fast:      0.2s ease;
  --siro-trans:           0.3s ease;
  --siro-trans-bouncy:    0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  --siro-trans-overshoot: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ---- Layout --------------------------------------------------------- */
  --siro-container-max:  1400px;
  --siro-bp-mobile:       720px;     /* below = mobile (reserved - breakpoint reference) */
  --siro-bp-tablet:      1100px;     /* 721 .. 1100 = tablet, above = desktop (reserved) */

  /* ---- Z-index scale (sparing) --------------------------------------- */
  --siro-z-nav:     1000;
  --siro-z-overlay: 1500;
}