/* ==========================================================================
   EXOES — Design tokens (CSS custom properties)
   File: /site/assets/css/variables.css
   Source: values extracted from the live exoes.com stylesheets
           (Elementor global kit "post-5.css", theme "style.css" / "style2.css").
   Rule: change a colour or a size HERE ONLY; every page uses these variables.
   Values were checked against the rendered pages (October 2026).
   Assisté par IA
   ========================================================================== */

:root {
  /* ---------- Brand colours (from the Elementor global kit) ---------- */
  --color-primary:    #203380; /* Main navy: headings and body text */
  --color-secondary:  #00618B; /* Deep blue */
  --color-accent:     #FFFFFF; /* White (kit "accent" colour) */
  --color-bright:     #0198FF; /* Bright blue (custom kit colour) */
  --color-ink:        #00225E; /* Dark navy: links, button text and borders (most used colour) */
  --color-text:       var(--color-primary);
  --color-link:       var(--color-ink);
  --color-white:      #FFFFFF;
  --color-black:      #000000;

  /* ---------- Neutral greys (found in theme CSS) ---------- */
  --color-grey-300:   #DADADA;
  --color-grey-400:   #CCCCCC;
  --color-grey-500:   #ADB5B7;
  --color-grey-600:   #898888;
  --color-grey-800:   #333333;

  /* ---------- Secondary colours found in the old CSS (not used on the home page; kept for later pages) ---------- */
  --color-red:        #E04562; /* Form error messages (to confirm on the contact page) */
  --color-green:      #61A229; /* Success messages (to confirm on the contact page) */
  --color-green-dark: #4E8221; /* Hover state of the green above */
  --color-teal:       #00ACAD;

  /* ---------- Transparencies built from the dark navy ---------- */
  --color-ink-50:     rgba(0, 34, 94, 0.5);

  /* ---------- Component colours (measured on the live site) ---------- */
  --color-header-bg:  var(--color-primary); /* Header and drop-down menus */
  --color-hero-bg:    var(--color-ink);     /* Behind slideshow images */
  --color-panel-bg:   var(--color-primary); /* "Our thermal management solutions" panel */
  --color-flip-back:  var(--color-bright);  /* Back side of the flip cards */
  --color-footer-bg:  #FCFCFD;
  --shadow-soft:      0 3px 6px rgba(0, 0, 0, 0.16);

  /* ---------- Typography ---------- */
  /* Exo is the only family declared in the global kit (SIL Open Font License,
     self-hosted in /assets/fonts/). Open Sans was loaded by the old site from an external
     server but is not visibly used on the pages: it is not kept. */
  --font-main:        "Exo", "Segoe UI", Arial, sans-serif;
  --weight-regular:   400; /* Body text */
  --weight-medium:    500; /* Accent text */
  --weight-semibold:  600; /* Primary typography */
  --weight-bold:      700; /* Headings h1 to h4 */

  --size-h1:          50px;
  --size-h2:          50px;
  --size-h3:          30px;
  --size-h6:          18px;
  --size-body:        16px; /* Confirmed on rendered page */
  --size-small:       15px;
  --size-xsmall:      13px;
  --line-height-body: 1.5;  /* Confirmed: 16px / 24px */
  --size-h2-mobile:   40px;
  --size-h4:          24px;
  --size-nav:         15px;
  --size-subnav:      13px;
  --font-system:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Used by the original footer links */

  /* ---------- Layout ---------- */
  --container-max:    1400px; /* Max content width (global kit) */
  --space-xs:         10px;
  --space-sm:         20px;
  --space-md:         30px;
  --space-lg:         40px;
  --button-padding:   12px 24px;
  --button-border:    1px solid var(--color-ink);
  --radius-pill:      45px;
  --header-height:    90px;   /* Desktop */
  --header-height-sm: 73px;   /* Tablet and mobile */

  /* ---------- Breakpoints (reference only: CSS variables cannot be used
     inside @media rules, so these exact values are repeated there) ----------
     Mobile:  up to 767px
     Tablet:  768px to 1024px
     Desktop: from 1025px
     Wide:    from 1400px */
}