/* ==========================================================================
   Optrical design tokens
   Extracted from the live Elementor stylesheet. This file is the single
   source of truth for the brand and is copied verbatim into o4qr's
   static folder — do not add site-specific rules here.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --c-navy:          #023151;  /* headings, nav links, primary button       */
  --c-navy-deep:     #00243D;  /* footer body                               */
  --c-navy-black:    #001A2C;  /* footer bottom bar                         */
  --c-blue-hover:    #0868AA;  /* primary button hover                      */
  --c-card-title:    #132C47;  /* card headings                             */

  --c-orange:        #F26429;  /* accent / button hover                     */
  --c-orange-alt:    #EE6333;
  --c-orange-deep:   #CF4A13;
  --c-orange-link:   #DD6600;  /* infobox title hover                       */

  /* --- Text ------------------------------------------------------------- */
  --c-text:          #4F5256;
  --c-text-muted:    #797C80;
  --c-eyebrow:       #C5C5C5;
  --c-nav-hover:     #707070;
  --c-footer-text:   #708492;
  --c-footer-icon:   #99A7B1;
  --c-steel:         #8FA3B0;

  /* --- Lines & surfaces -------------------------------------------------- */
  --c-border:        #E5E5E5;  /* card border                               */
  --c-rule:          #E9E9E9;  /* header divider                            */
  --c-surface:       #FFFFFF;
  --c-footer-rule:   rgba(153, 167, 177, 0.39);

  /* Tinted panels. One step each; do not add a fourth near-identical grey.  */
  --c-panel:         #F4F6F8;  /* section / card panel                      */
  --c-panel-alt:     #EDF1F4;  /* nested panel, mobile nav groups           */
  --c-field-border:  #D3D8DD;  /* form control border                       */

  /* --- Status ------------------------------------------------------------ */
  --c-notice-soon:     var(--c-orange);
  --c-notice-soon-bg:  linear-gradient(180deg, #FFF9F5 0%, #FFFFFF 100%);
  --c-notice-info:     var(--c-navy);
  --c-notice-info-bg:  #F5F8FA;
  --c-notice-warn:     #C77700;
  --c-notice-warn-bg:  #FFF6E5;
  --c-ok:              #2E7D32;
  --c-ok-bg:           #EDF7ED;
  --c-error:           #B3261E;

  /* --- Placeholder (missing image) --------------------------------------- */
  --c-ph-text:       #7C858E;
  --c-ph-bg:         #E8EBEE;
  --c-ph-border:     #C2C9D0;
  --c-ph-bg-dark:    #5A646E;

  /* --- Typography -------------------------------------------------------- */
  --f-head: "Lato", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:       48px;  /* home slider caption, Lato 600                   */
  --fs-banner:     42px;  /* interior page banner, Roboto 600                */
  --fs-section:    28px;  /* section heading, Lato 600                       */
  --fs-sub:        19px;  /* sub-heading, Lato 400                           */
  --fs-card-title: 18px;
  --fs-body:       16px;
  --fs-eyebrow:    16px;  /* Roboto 400 uppercase                            */

  --lh-prose:   34px;  /* body copy in prose blocks                          */
  --lh-card:    25px;  /* body copy inside cards                             */
  --lh-heading: 41px;  /* 28px section headings                              */

  /* --- Layout ------------------------------------------------------------ */
  --container:    1140px;
  --gutter:       15px;
  --nav-height:   80px;
  --banner-min-h: 300px;

  /* --- Spacing scale ----------------------------------------------------- */
  --sp-1:  5px;
  --sp-2: 10px;
  --sp-3: 15px;
  --sp-4: 20px;
  --sp-5: 25px;
  --sp-6: 30px;
  --sp-7: 40px;
  --sp-8: 46px;
  --sp-9: 60px;

  --prose-gap: 32px;   /* paragraph rhythm, from the parent theme            */

  /* --- Effects ----------------------------------------------------------- */
  --shadow-card:    0 0 13px 0 rgba(0, 0, 0, 0.11);
  --shadow-hover:   0 4px 22px 0 rgba(2, 49, 81, 0.16);
  --text-shadow-hero: 0 4px 16px rgba(0, 0, 0, 0.30);

  --radius-btn:         4px;
  --radius-btn-outline: 3px;

  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.3s var(--ease);
}

/* Breakpoints are 1024px (tablet) and 767px (mobile), matching the
   Elementor configuration. CSS custom properties cannot be used inside
   media queries, so those values are written literally throughout. */