/* excire.com — Design Tokens
 * Values measured from the LIVE site via computed styles (2026-07-11).
 * These are the real rendered values, not guesses.
 */

:root {
    /* ---- Colors (measured) ---- */
    --color-primary:        #09adfc;  /* Excire cyan-blue (most-used accent) */
    --color-link:           #1b67e6;  /* royal blue — links (e.g. footer links) */
    --color-primary-hover:  #147bed;
    --color-accent:         #48eddd;  /* teal accent */
    --color-white:          #ffffff;
    --color-black:          #000000;

    --color-text:           #000000;  /* headings, sublines, paragraphs all black (site-wide) */
    --color-text-muted:     #5a5a5a;  /* VERIFY */
    --color-bg:             #ffffff;
    --color-bg-alt:         #f5f7fa;  /* VERIFY — light section background */
    --color-border:         #e4e8ee;  /* VERIFY */

    /* ---- Footer (measured: sections black #000, text/icons white) ---- */
    --color-footer-bg:       #000000;  /* footer sections are black */
    --color-footer-text:     #ffffff;  /* headings white */
    --color-footer-link:     #ffffff;  /* footer link text is white (span) */
    --color-footer-link-hover:#1b67e6; /* royal blue on hover (VERIFY) */
    --color-footer-icon:     #ffffff;  /* social icons are white */
    --color-footer-icon-bg:  #3a3a3a;  /* round social icon background */
    --color-footer-rule:     rgba(255,255,255,.85);  /* thin white divider lines */

    /* ---- Header ---- */
    --header-bg-top:        transparent;             /* over hero at page top */
    --header-bg-sticky:     #ffffff;                 /* white when scrolled/sticky */
    --header-shadow-sticky: 0 0 10px rgba(0,0,0,.07);
    --header-height:        66px;                    /* measured */

    /* ---- Typography (measured) ---- */
    /* The whole site runs on Maven Pro; Roboto is used only for buttons. */
    --font-base:    "Maven Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: "Maven Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-button:  "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

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

    --fs-base:    20px;   /* live body font-size */
    --lh-base:    1.5;    /* live line-height 30px / 20px */

    /* Type scale (measured on live) */
    --fs-h1: 62px;        /* kit default h1 (700); 52px tablet, 42px mobile */
    --fs-h2: 48px;        /* section H2 (700) */
    --fs-h3: 34px;        /* kit default h3 (500, lh 2.5rem) */
    --fs-nav: 15px;       /* nav links (500, UPPERCASE) */

    /* ---- Layout ---- */
    --container-max: 1356px;  /* measured Elementor content width */

    /* ---- Section rhythm (derived from live: 50-100px; unified for consistency) ---- */
    --section-y: 80px;        /* standard vertical section padding */
    --section-y-sm: 50px;     /* compact strips (awards/logos) */
    --container-pad: 20px;

    /* ---- Navigation (measured) ---- */
    --nav-link-pad: 13px 20px;

    /* ---- Spacing scale ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;

    --radius: 0px;   /* live buttons are square (border-radius 0) */
    --shadow: 0 0 10px rgba(0, 0, 0, .07);

    /* ---- Global button design (blue gradient, rectangular) ---- */
    --btn-grad:       linear-gradient(135deg, #1B67E6 0%, #00ACFF 100%);
    --btn-grad-hover: linear-gradient(135deg, #00ACFF 0%, #1B67E6 100%);

    /* ---- Responsive breakpoints (Elementor; VERIFY custom ones) ---- */
    --bp-mobile: 767px;
    --bp-tablet: 1024px;
}

/* Responsive heading scale — the kit shrinks the display headings on smaller
   screens (h1: 62→52→42). Pages with their own explicit mobile heading sizes
   (home/product/office hero) override these anyway; this catches every page
   that uses the raw tokens (posts, legal, shop, news, generic page heroes) so
   a long title no longer runs to 8 lines on a phone. */
@media (max-width: 1024px) {
    :root { --fs-h1: 52px; --fs-h2: 40px; --fs-h3: 30px; }
}
@media (max-width: 767px) {
    :root { --fs-h1: 42px; --fs-h2: 32px; --fs-h3: 26px; }
}