/* SAA Design System — CSS Custom Properties
   Source: studyabroadassociation.com (Elementor Kit #8 + post-209)
   Extracted: 2026-04-21
*/

:root {
  /* ── Brand ────────────────────────────────────────────── */
  --saa-navy:            #0F2B4D;   /* primary brand — headings, icons, footer */
  --saa-teal:            #60C7D7;   /* accent — highlights, stats; brand Teal Blue (Visual Brand Guide, 2026-10-23; was #6CC6D9) */
  --saa-teal-dark:       #257A8D;   /* primary CTA button bg — 4.9:1 with white text (was #60B6C9, 2.3:1) */
  --saa-teal-deep:       #20718A;   /* link color — 5.5:1 on white (was #3396AC, 3.4:1) */
  --saa-cyan-pale:       #F4FDFF;   /* alt section bg */
  --saa-cyan-light:      #D9F0F5;   /* soft card bg */
  --saa-peach:           #FFBC7D;   /* page transition accent (use sparingly) */

  /* Space-separated RGB channels — paired with each hex above so Tailwind's
     opacity modifier (`bg-navy/90`, `border-teal/30`) can compile to
     `rgb(var(--saa-navy-rgb) / 0.9)`. Without these, Tailwind 3 silently
     drops the rule because `var(--saa-navy)` resolves to a hex string, not
     channels. Keep in sync with the hex values above. */
  --saa-navy-rgb:        15 43 77;
  --saa-teal-rgb:        96 199 215;
  --saa-teal-dark-rgb:   37 122 141;
  --saa-teal-deep-rgb:   32 113 138;
  --saa-cyan-pale-rgb:   244 253 255;
  --saa-cyan-light-rgb:  217 240 245;
  --saa-peach-rgb:       255 188 125;

  /* ── Neutrals ─────────────────────────────────────────── */
  --saa-white:           #FFFFFF;
  --saa-gray-50:         #F4FDFF;
  --saa-gray-100:        #D9F0F5;
  --saa-gray-200:        #CECECE;
  --saa-gray-300:        #96A2B1;
  --saa-gray-400:        #979797;
  --saa-gray-500:        #747474;
  --saa-gray-600:        #666666;   /* muted text — 5.7:1 on white (was #7A7A7A, 4.3:1) */
  --saa-gray-700:        #54595F;
  --saa-gray-900:        #333333;

  --saa-gray-200-rgb:    206 206 206;
  --saa-gray-600-rgb:    102 102 102;
  --saa-gray-700-rgb:    84 89 95;
  --saa-gray-900-rgb:    51 51 51;

  /* ── Semantic ─────────────────────────────────────────── */
  --saa-text:            var(--saa-gray-900);
  --saa-text-secondary:  var(--saa-gray-700);
  --saa-text-muted:      var(--saa-gray-600);
  --saa-text-inverse:    var(--saa-white);
  --saa-heading:         var(--saa-navy);
  --saa-link:            var(--saa-teal-deep);
  --saa-link-hover:      var(--saa-gray-300);
  --saa-bg:              var(--saa-white);
  --saa-bg-alt:          var(--saa-cyan-pale);
  --saa-bg-card:         var(--saa-cyan-light);
  --saa-border:          var(--saa-gray-200);

  /* Semantic RGB channels — alias the base `-rgb` channel vars so the
     Tailwind `text-ink` / `bg-bg-card` / `border-saa-border` colors track
     any rebind of the semantic layer (e.g., `--saa-text: var(--saa-gray-700)`
     for a future low-contrast variant). */
  --saa-text-rgb:            var(--saa-gray-900-rgb);
  --saa-text-secondary-rgb:  var(--saa-gray-700-rgb);
  --saa-text-muted-rgb:      var(--saa-gray-600-rgb);
  --saa-heading-rgb:         var(--saa-navy-rgb);
  --saa-bg-alt-rgb:          var(--saa-cyan-pale-rgb);
  --saa-bg-card-rgb:         var(--saa-cyan-light-rgb);
  --saa-border-rgb:          var(--saa-gray-200-rgb);

  /* ── Status and surfaces (Jarvis hubs) ────────────────── */
  /* Added 2026-10-15 for the Programs Hub, program page and Marketing,
     which painted these with hard-coded hex values. Status colours come in
     pairs: the text colour and its soft background. */
  --saa-line:              #E3EEF2;   /* hairline borders of cards and tables */
  --saa-highlight:         #EAF6F9;   /* the open or selected row */
  --saa-surface-subtle:    #F4F6F8;   /* quiet panel background */
  --saa-success:           #1F5C3F;   /* client, done */
  --saa-success-bg:        #E3F4EC;
  --saa-danger:            #B42318;   /* lost, overdue, step 10 */
  --saa-danger-bg:         #FDE7E5;
  --saa-danger-bg-warm:    #FBE4DD;   /* do not use, missing document (Suppliers) */
  --saa-warning:           #7A4B00;   /* needs attention */
  --saa-warning-bg:        #FDF0DC;
  --saa-info:              #1F4E79;   /* contacted, inactive client */
  --saa-info-bg:           #E1EEF9;
  --saa-neutral:           #3D4A55;   /* never contacted, no status */
  --saa-neutral-bg:        #EEF1F4;
  --saa-accent-purple:     #4B3A8C;   /* past programs */
  --saa-accent-purple-bg:  #EEE9FA;
  --saa-text-soft:         #5B6670;   /* secondary text in the hubs */
  --saa-text-faint:        #6B7780;   /* dates, small print */
  --saa-text-hint:         #8A949C;   /* placeholders, hints */
  --saa-warning-soft:      #FFF8EC;   /* notice background (Marketing) */
  --saa-warning-edge:      #E8CB8A;   /* notice border */
  --saa-danger-soft:       #FFF6F5;   /* alert background (Programs Hub) */
  --saa-danger-edge:       #F4C7C3;   /* alert border */
  --saa-accent-plum:       #8E3B63;   /* in talks */
  --saa-accent-plum-bg:    #F3E3EB;
  --saa-accent-mint:       #145F57;   /* ready */
  --saa-accent-mint-bg:    #DFF3F1;   /* also team badges */
  --saa-cyan-edge:         #B9D7E2;   /* MAIA pill border, light text on navy */
  --saa-cyan-dashed:       #9FC3D1;   /* dashed "+ Plan" border */
  --saa-ring-hover:        #9FD3E3;   /* hover ring of the avatars */
  --saa-line-strong:       #CFE3EA;   /* seat edges, map strokes, card borders */
  --saa-text-quiet:        #9AA5B1;   /* map borders, inactive sort arrow */
  --saa-text-divider:      #B8C2CA;   /* "›" separators */
  --saa-text-strong:       #2B2E32;   /* number inside the gradient ring; brand Grey-Black (was #2B2F35) */
  --saa-rust:              #9A3412;   /* no deal yet */
  --saa-brand-magenta:     #BF579F;   /* gradient ring, start; brand Purple (was #B9579F) */
  --saa-brand-aqua:        #60C7D7;   /* gradient ring, end; brand Teal Blue (was #5EC6D7) */
  /* Added 2026-10-18 for the Company page. */
  --saa-cyan-mist:         #E6F5F9;   /* Vision gradient, middle */
  --saa-cyan-wash:         #F1FAFC;   /* Vision gradient, end */
  --saa-on-navy:           #D3E6EE;   /* light text on a navy panel */
  --saa-navy-track:        #1E4470;   /* progress track on a navy panel */
  --saa-notice-bg:         #FFF8E6;   /* "what is missing" notice */
  --saa-notice-edge:       #F0D9A8;
  --saa-notice-text:       #5C3A00;
  --saa-accent-blue:       #2F6DB5;   /* org chart team */
  --saa-accent-blue-bg:    #E1ECF8;
  --saa-accent-violet:     #6E58B0;   /* InnoHub */
  --saa-accent-violet-bg:  #EEEAF8;
  --saa-accent-violet-deep: #3E2F73;  /* InnoHub department names */

  --saa-line-rgb:            227 238 242;
  --saa-highlight-rgb:        234 246 249;
  --saa-surface-subtle-rgb:   244 246 248;
  --saa-success-rgb:          31 92 63;
  --saa-success-bg-rgb:       227 244 236;
  --saa-danger-rgb:           180 35 24;
  --saa-danger-bg-rgb:        253 231 229;
  --saa-danger-bg-warm-rgb:   251 228 221;
  --saa-warning-rgb:          122 75 0;
  --saa-warning-bg-rgb:       253 240 220;
  --saa-info-rgb:             31 78 121;
  --saa-info-bg-rgb:          225 238 249;
  --saa-neutral-rgb:          61 74 85;
  --saa-neutral-bg-rgb:       238 241 244;
  --saa-accent-purple-rgb:    75 58 140;
  --saa-accent-purple-bg-rgb: 238 233 250;
  --saa-text-soft-rgb:        91 102 112;
  --saa-text-faint-rgb:       107 119 128;
  --saa-text-hint-rgb:        138 148 156;
  --saa-warning-soft-rgb:     255 248 236;
  --saa-warning-edge-rgb:     232 203 138;
  --saa-danger-soft-rgb:      255 246 245;
  --saa-danger-edge-rgb:      244 199 195;
  --saa-accent-plum-rgb:      142 59 99;
  --saa-accent-plum-bg-rgb:   243 227 235;
  --saa-accent-mint-rgb:      20 95 87;
  --saa-accent-mint-bg-rgb:   223 243 241;
  --saa-cyan-edge-rgb:        185 215 226;
  --saa-cyan-dashed-rgb:      159 195 209;
  --saa-ring-hover-rgb:       159 211 227;
  --saa-line-strong-rgb:      207 227 234;
  --saa-text-quiet-rgb:       154 165 177;
  --saa-text-divider-rgb:     184 194 202;
  --saa-text-strong-rgb:      43 46 50;
  --saa-rust-rgb:             154 52 18;
  --saa-brand-magenta-rgb:    191 87 159;
  --saa-brand-aqua-rgb:       96 199 215;
  --saa-cyan-mist-rgb:        230 245 249;
  --saa-cyan-wash-rgb:        241 250 252;
  --saa-on-navy-rgb:          211 230 238;
  --saa-navy-track-rgb:       30 68 112;
  --saa-notice-bg-rgb:        255 248 230;
  --saa-notice-edge-rgb:      240 217 168;
  --saa-notice-text-rgb:      92 58 0;
  --saa-accent-blue-rgb:      47 109 181;
  --saa-accent-blue-bg-rgb:   225 236 248;
  --saa-accent-violet-rgb:    110 88 176;
  --saa-accent-violet-bg-rgb: 238 234 248;
  --saa-accent-violet-deep-rgb: 62 47 115;

  /* ── Typography ───────────────────────────────────────── */
  --saa-font-display:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --saa-font-body:       "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --saa-font-accent:     "Roboto", system-ui, sans-serif;
  --saa-font-serif:      "Roboto Slab", Georgia, serif;

  --saa-weight-regular:  400;
  --saa-weight-medium:   500;
  --saa-weight-semibold: 600;
  --saa-weight-bold:     700;

  --saa-fs-h1:           46px;
  --saa-fs-h2:           38px;
  --saa-fs-h3:           35px;
  --saa-fs-h4:           20px;
  --saa-fs-body:         18px;
  --saa-fs-button:       16px;
  --saa-fs-small:        14px;

  --saa-lh-h1:           50px;
  --saa-lh-h2:           50px;
  --saa-lh-h3:           40px;
  --saa-lh-body:         26px;

  /* ── Radii ────────────────────────────────────────────── */
  --saa-radius-sm:       4px;
  --saa-radius-md:       8px;
  --saa-radius-button:   10px;
  --saa-radius-lg:       16px;
  --saa-radius-pill:     9999px;

  /* ── Spacing ──────────────────────────────────────────── */
  --saa-space-xs:        4px;
  --saa-space-sm:        8px;
  --saa-space-md:        16px;
  --saa-space-lg:        24px;
  --saa-space-xl:        40px;
  --saa-space-2xl:       64px;
  --saa-space-section:   80px;

  /* ── Layout ───────────────────────────────────────────── */
  --saa-container-max:   1360px;
  --saa-widget-gap:      20px;

  /* ── Shadows ──────────────────────────────────────────── */
  --saa-shadow-sm:       0 1px 2px 0 rgb(15 43 77 / 0.05);
  --saa-shadow-md:       0 4px 12px 0 rgb(15 43 77 / 0.08);
  --saa-shadow-lg:       0 12px 32px 0 rgb(15 43 77 / 0.12);
}

/* Responsive type scale — mirrors Elementor kit breakpoints */
@media (max-width: 1366px) {
  :root {
    --saa-fs-body:   16px;
    --saa-fs-h1:     36px;
    --saa-fs-h3:     30px;
    --saa-fs-h4:     26px;
    --saa-fs-button: 14px;
    --saa-lh-body:   24px;
    --saa-lh-h1:     40px;
    --saa-lh-h3:     40px;
  }
}

@media (max-width: 767px) {
  :root {
    --saa-fs-body:   15px;
    --saa-fs-h1:     34px;
    --saa-fs-h2:     26px;
    --saa-fs-h3:     20px;
    --saa-fs-button: 14px;
    --saa-lh-body:   22px;
    --saa-lh-h1:     42px;
    --saa-lh-h2:     32px;
  }
}

/* ── Base element styles ─────────────────────────────── */
body {
  font-family: var(--saa-font-display);
  font-size: var(--saa-fs-body);
  font-weight: var(--saa-weight-regular);
  line-height: var(--saa-lh-body);
  color: var(--saa-text);
  background: var(--saa-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--saa-font-display);
  font-weight: var(--saa-weight-regular);
  color: var(--saa-heading);
}

h1 { font-size: var(--saa-fs-h1); line-height: var(--saa-lh-h1); }
h2 { font-size: var(--saa-fs-h2); line-height: var(--saa-lh-h2); }
h3 { font-size: var(--saa-fs-h3); line-height: var(--saa-lh-h3); }
h4 { font-size: var(--saa-fs-h4); font-weight: var(--saa-weight-medium); }

a {
  color: var(--saa-link);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--saa-link-hover); }

.btn,
button.saa,
.saa-button {
  display: inline-block;
  background: var(--saa-teal-dark);
  color: var(--saa-text-inverse);
  font-family: var(--saa-font-display);
  font-size: var(--saa-fs-button);
  font-weight: var(--saa-weight-semibold);
  padding: 20px 40px;
  border: 0;
  border-radius: var(--saa-radius-button);
  cursor: pointer;
  transition: background .15s ease;
}
.btn:hover,
button.saa:hover,
.saa-button:hover {
  background: var(--saa-gray-900);
  color: var(--saa-text-inverse);
}

.container {
  max-width: var(--saa-container-max);
  margin-inline: auto;
  padding-inline: var(--saa-space-lg);
}