/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* =========================================================
   Design tokens — Home
   Source: render.html (tailwind.config + :root + utility usage)
   NOTE: render.html marks the Patterson colours + fonts as
   UNVERIFIED substitutions — confirm against the brand guide.
   Breakpoints: Desktop >=1025 · Tablet 768–1024 · Mobile <=767
   ========================================================= */

:root {
  /* ---------- Colour ---------- */
  --color-primary:       #043264;  /* navy — headings, dark sections */
  --color-primary-900:   #02203F;  /* navy-900 — footer base */
  --color-primary-800:   #0A2A52;  /* navy-800 — image-frame gradient start */
  --color-accent:        #0060AE;  /* brand — primary button, eyebrows, dots */
  --color-accent-hover:  #004F8F;  /* brand-hover */
  --color-accent-tint:   #EAF2FA;  /* brand-tint — light badges/panels */
  --color-accent-soft:   #D3E4F4;  /* brand-soft */
  --color-text:          #1F2A37;  /* ink — body copy */
  --color-muted:         #5B6675;  /* ink-muted — secondary copy */
  --color-border:        #DDE4EC;  /* line — card + divider borders */
  --color-tint:          #F3F6FA;  /* canvas — alt section background */
  --color-white:         #FFFFFF;
  --color-error:         #B42318;  /* form error text */

  /* ---------- Typography ---------- */
  --font-display: "Outfit", system-ui, sans-serif;  /* 600 · 700 · 800 */
  --font-body:    "Urbanist", "Inter", system-ui, sans-serif;              /* 400 · 500 · 600 */

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

  /* H1 — hero: display 800, lh 1.08, tracking-tight */
  --h1-size-mobile:  38px;
  --h1-size-tablet:  48px;   /* sm:text-5xl */
  --h1-size-desktop: 52px;
  --h1-line-height:  1.08;

  /* H2 — section titles: display 800, lh 1.12, tracking-tight */
  --h2-size-mobile:  30px;   /* text-3xl */
  --h2-size-tablet:  36px;   /* sm:text-4xl */
  --h2-size-desktop: 44px;
  --h2-line-height:  1.12;

  /* H3 — card titles: display 700 */
  --h3-size:         22px;   /* also 21px / 24px variants in render */
  --h3-size-large:   28px;   /* sm:text-[28px] feature title */

  --letter-spacing-tight: -0.025em;  /* tracking-tight (headings) */

  /* Eyebrow — 13px, 600, uppercase, tracking .14em, accent colour */
  --eyebrow-size:           13px;
  --eyebrow-letter-spacing: 0.14em;

  /* Body */
  --text-lead:  18px;   /* text-lg — section intro */
  --text-body:  16px;
  --text-btn:   15px;
  --text-small: 13px;
  --text-micro: 12px;
  --line-height-body: 1.65;

  /* ---------- Layout ---------- */
  --container-max:    1240px;  /* user-confirmed (render.html: 1200px) */
  --page-max:         1440px;
  --gutter-mobile:    20px;   /* px-5 */
  --gutter-desktop:   0px;    /* lg:px-0 */
  --header-height:    76px;
  --text-max-narrow:  620px;
  --text-max-mid:     760px;
  --text-max-wide:    980px;

  /* Section vertical padding (py-20 → lg:py-28) */
  --section-py-mobile:  80px;
  --section-py-desktop: 112px;

  /* Gaps */
  --gap-xs: 8px;    /* gap-2 */
  --gap-sm: 12px;   /* gap-3 */
  --gap-md: 16px;   /* gap-4 */
  --gap-lg: 24px;   /* gap-6 */
  --gap-xl: 48px;   /* gap-12 */
  --gap-2xl: 80px;  /* lg:gap-20 */

  /* ---------- Shape ---------- */
  --radius-btn:  6px;     /* rounded-md */
  --radius-card: 16px;    /* rounded-2xl */
  --radius-md:   12px;    /* rounded-xl */
  --radius-pill: 9999px;

  /* Buttons: padding 12px 20px, 600 weight */
  --btn-py: 12px;
  --btn-px: 20px;
  --btn-outline-border: 2px;

  /* ---------- Effects ---------- */
  --shadow-card:   0 1px 2px rgba(4,50,100,.04), 0 8px 24px -12px rgba(4,50,100,.12);
  --shadow-header: 0 6px 20px -12px rgba(4,50,100,.25);
  --focus-ring:    3px solid var(--color-accent);
}