/* ============================================================
   Sunny Express — Design Tokens
   Source of truth for colors, type, spacing, radii, shadows.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* -------------------------------------------------- Brand colors */
  --sunny-navy:        #1B2A4A;
  --sunny-navy-80:     rgba(27, 42, 74, 0.8);
  --sunny-navy-10:     rgba(27, 42, 74, 0.10);
  --sunny-gold:        #C89B3C;
  --sunny-gold-soft:   rgba(200, 155, 60, 0.12);
  --sunny-gold-glow:   rgba(200, 155, 60, 0.28);
  --sunny-cream:       #F7F4ED;
  --sunny-grey-300:    #6A7282;  /* Secondary text */
  --sunny-grey-100:    #EBEBEB;  /* Subtle background */
  --sunny-grey-50:     #D1D5DC;  /* Borders, dividers */
  --sunny-white:       #FFFFFF;
  --sunny-black:       #000000;

  /* -------------------------------------------------- Semantic colors */
  --fg-1:              var(--sunny-navy);        /* Headings, dominant text */
  --fg-2:              var(--sunny-navy-80);     /* Body text */
  --fg-3:              var(--sunny-grey-300);    /* Meta / captions */
  --fg-inverse:        var(--sunny-white);       /* Text on navy/gold */
  --bg-page:           var(--sunny-white);
  --bg-soft:           var(--sunny-cream);
  --bg-strong:         var(--sunny-navy);
  --bg-subtle:         var(--sunny-grey-100);
  --border:            var(--sunny-grey-50);
  --border-strong:     var(--sunny-grey-300);
  --accent:            var(--sunny-gold);
  --accent-soft:       var(--sunny-gold-soft);
  --link:              var(--sunny-gold);
  --link-hover:        var(--sunny-navy);

  /* -------------------------------------------------- Type families */
  --font-display:      "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading:      "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:         "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-button:       "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* -------------------------------------------------- Type scale (desktop) */
  --fs-display:        40px;
  --fs-h1:             36px;
  --fs-h2:             32px;
  --fs-h3:             24px;
  --fs-h4:             20px;
  --fs-body-lg:        18px;
  --fs-body:           16px;
  --fs-overline:       14px;
  --fs-button:         14px;

  --lh-display:        1.15;
  --lh-h1:             1.20;
  --lh-h2:             1.25;
  --lh-h3:             1.30;
  --lh-h4:             1.35;
  --lh-body:           1.55;
  --lh-body-lg:        1.60;
  --lh-overline:       1.20;
  --lh-button:         1.00;

  --ls-display:        -0.02em;
  --ls-h1:             -0.02em;
  --ls-h2:             -0.01em;
  --ls-h3:             -0.01em;
  --ls-h4:             0;
  --ls-overline:       0.04em;
  --ls-button:         0.02em;

  /* -------------------------------------------------- Spacing scale (4-based) */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           20px;    /* Elementor widget gap */
  --space-6:           24px;
  --space-7:           32px;
  --space-8:           40px;
  --space-9:           56px;
  --space-10:          80px;
  --space-11:          120px;

  /* -------------------------------------------------- Radii */
  --radius-sm:         4px;
  --radius:            8px;     /* System default — buttons, inputs, cards */
  --radius-lg:         16px;
  --radius-full:       9999px;

  /* -------------------------------------------------- Borders */
  --border-width:      1px;

  /* -------------------------------------------------- Shadows */
  --shadow-button:     0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card:       0 2px 8px rgba(27, 42, 74, 0.08);
  --shadow-hover:      0 8px 20px var(--sunny-gold-glow);
  --shadow-mobile-cta: 0 -4px 16px rgba(0, 0, 0, 0.15);
  --shadow-focus-ring: 0 0 0 3px rgba(200, 155, 60, 0.15);

  /* -------------------------------------------------- Layout */
  --content-max:       1180px;
  --widget-gap:        20px;
  --bp-mobile:         767px;
  --bp-tablet:         1024px;

  /* -------------------------------------------------- Motion */
  --easing:            ease;
  --t-fast:            0.15s;
  --t-base:            0.20s;
}

/* ============================================================
   Base type — semantic element styles
   ============================================================ */

html {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--space-4) 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }

p {
  margin: 0 0 var(--space-4) 0;
  line-height: var(--lh-body);
  text-align: left;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--t-fast) var(--easing);
}
a:hover { color: var(--link-hover); }

/* Utility classes mirroring the Elementor Global Fonts */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}
.t-h1 { font: 700 var(--fs-h1)/var(--lh-h1) var(--font-heading); letter-spacing: var(--ls-h1); color: var(--fg-1); }
.t-h2 { font: 700 var(--fs-h2)/var(--lh-h2) var(--font-heading); letter-spacing: var(--ls-h2); color: var(--fg-1); }
.t-h3 { font: 700 var(--fs-h3)/var(--lh-h3) var(--font-heading); letter-spacing: var(--ls-h3); color: var(--fg-1); }
.t-h4 { font: 700 var(--fs-h4)/var(--lh-h4) var(--font-heading); letter-spacing: var(--ls-h4); color: var(--fg-1); }
.t-body-lg { font: 400 var(--fs-body-lg)/var(--lh-body-lg) var(--font-body); color: var(--fg-2); }
.t-body { font: 400 var(--fs-body)/var(--lh-body) var(--font-body); color: var(--fg-2); }
.t-meta { font: 400 var(--fs-body)/var(--lh-body) var(--font-body); color: var(--fg-3); }
.t-overline {
  font: 700 var(--fs-overline)/var(--lh-overline) var(--font-body);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-1);
}
.t-button {
  font: 700 var(--fs-button)/var(--lh-button) var(--font-button);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}

/* ============================================================
   Mobile type scaling (≤ 767px)
   ============================================================ */

@media (max-width: 767px) {
  :root {
    --fs-display:  28px;
    --fs-h1:       26px;
    --fs-h2:       24px;
    --fs-h3:       20px;
    --fs-h4:       18px;
    --fs-body:     15px;
    --fs-body-lg:  16px;
    --fs-overline: 13px;
  }
}

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
  :root {
    --fs-display:  32px;
    --fs-h1:       30px;
    --fs-h2:       28px;
    --fs-h3:       22px;
    --fs-h4:       19px;
    --fs-body-lg:  17px;
  }
}

/* ============================================================
   Form fields — base appearance
   ============================================================ */

input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-1);
  background: var(--sunny-white);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color var(--t-fast) var(--easing),
              box-shadow var(--t-fast) var(--easing);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sunny-gold);
  box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 767px) {
  input, select, textarea {
    min-height: 48px;
    font-size: 16px; /* prevents iOS zoom */
  }
}