/* ============================================================================
   STRATTIVO — DESIGN TOKENS  (single source of truth for the visual identity)
   ----------------------------------------------------------------------------
   Prime directive: NO magic values anywhere in the site. Every color, font,
   size, radius, spacing, shadow and z-index is defined here and consumed via
   var(--token). When the real logo arrives, tune ONLY the --brand-* values
   below and the whole site re-skins consistently.

   Brand: Navy · Turquoise · White  |  Feel: premium, corporate, execution-first
   ========================================================================== */

:root {
  /* ---- Brand primitives — derived from the STRATTIVO logo ----------------
     Logo colours: navy #001C58, corporate blue #006AB3. These govern the
     identity. Swap here to re-skin the whole site.                          */
  --navy-950: #00113A;
  --navy-900: #001C58;   /* brand navy — primary dark surface / hero bg      */
  --navy-800: #052A6E;
  --navy-700: #0A3C87;
  --navy-600: #12509E;
  --navy-500: #1E63B0;

  --blue-300: #5AB0EE;   /* light azure — accents on dark surfaces           */
  --blue-400: #2E93DE;
  --blue-500: #006AB3;   /* brand blue — primary accent                      */
  --blue-600: #015C9B;
  --blue-700: #024A7E;

  --electric: #4DA8F0;   /* bright royal blue — energetic gradients & glows    */

  /* ---- Energetic gradients (derived from brand blues) -------------------- */
  --grad-hero:   linear-gradient(135deg, var(--navy-950) 0%, #062E73 46%, var(--blue-500) 100%);
  --grad-brand:  linear-gradient(120deg, var(--blue-600) 0%, var(--blue-400) 100%);
  --grad-bright: linear-gradient(120deg, var(--blue-500) 0%, var(--electric) 100%);
  --grad-text:   linear-gradient(100deg, var(--blue-400) 0%, var(--electric) 100%);
  --grad-panel-1: linear-gradient(140deg, #05327A, var(--blue-500));
  --grad-panel-2: linear-gradient(140deg, var(--blue-600), var(--electric));
  --glow-accent: 0 14px 40px rgba(0, 106, 179, 0.35);
  --glow-bright: 0 16px 44px rgba(35, 199, 232, 0.30);

  --white:     #FFFFFF;
  --paper:     #F7F9FC;  /* off-white page background (light sections)        */
  --paper-2:   #EEF2F8;

  --slate-50:  #F1F5F9;
  --slate-100: #E2E8F0;
  --slate-200: #CBD5E1;
  --slate-300: #A9B7C9;
  --slate-400: #7C8DA6;
  --slate-500: #556378;
  --slate-600: #3B475A;
  --slate-700: #26303F;

  /* ---- Semantic color roles (use THESE in components) --------------------- */
  --bg:                var(--paper);
  --bg-elevated:       var(--white);
  --bg-inverse:        var(--navy-900);
  --bg-inverse-2:      var(--navy-800);

  --text-strong:       var(--navy-900);
  --text:              var(--slate-600);
  --text-muted:        var(--slate-400);
  --text-on-dark:      #E8EEF6;
  --text-on-dark-muted:#9FB0C6;

  --accent:            var(--blue-500);
  --accent-hover:      var(--blue-600);
  --accent-contrast:   var(--white);       /* text on top of accent fills      */
  --accent-soft:       rgba(0, 106, 179, 0.10);

  --border:            var(--slate-100);
  --border-strong:     var(--slate-200);
  --border-on-dark:    rgba(255, 255, 255, 0.10);

  --focus-ring:        var(--blue-400);

  /* ---- Typography -------------------------------------------------------- */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Fluid type scale (min → max via clamp), 1.25 ratio-ish, responsive       */
  --fs-display: clamp(3rem, 1.7rem + 5.4vw, 5.75rem);     /* hero headline    */
  --fs-ghost:   clamp(3.5rem, 2rem + 7vw, 8rem);          /* giant index numerals */
  --fs-h1:      clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
  --fs-h2:      clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --fs-h3:      clamp(1.35rem, 1.1rem + 1vw, 1.6rem);
  --fs-h4:      1.15rem;
  --fs-lead:    clamp(1.075rem, 1rem + 0.5vw, 1.3rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;
  --fs-eyebrow: 0.78rem;   /* uppercase labels                                */

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --tracking-eyebrow: 0.16em;
  --tracking-tight:  -0.02em;

  /* ---- Spacing scale (4px grid) ------------------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);  /* vertical section rhythm   */

  /* ---- Layout ------------------------------------------------------------ */
  --container-max: 1200px;
  --container-wide: 1320px;
  --container-pad: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --gutter: var(--space-6);

  /* ---- Radius ladder ----------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Elevation / shadows ---------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(10, 27, 52, 0.06), 0 1px 3px rgba(10, 27, 52, 0.08);
  --shadow-md:  0 6px 16px rgba(10, 27, 52, 0.08), 0 2px 6px rgba(10, 27, 52, 0.06);
  --shadow-lg:  0 18px 40px rgba(10, 27, 52, 0.12), 0 6px 14px rgba(10, 27, 52, 0.08);
  --shadow-accent: 0 12px 30px rgba(0, 106, 179, 0.30);

  /* ---- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  /* ---- Z-index ----------------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}