/* ==========================================================================
   deepIng Design System — Colors & Type
   Source: deepIng Brand Guidelines, Version 1
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Brand specifies Segoe UI (Light / Regular / Medium / Bold / Black).
   Segoe UI is a Microsoft system font; we use it first, and fall back to
   Open Sans (Google Fonts) — a close geometric humanist sans with the
   same weight ladder. Update `src/*` when licensed Segoe UI web fonts are
   dropped into /fonts.
   -------------------------------------------------------------------------- */

:root {
  /* ---- Core brand palette (from brand book p.14) ---- */
  --primary-blue:   #3269B4;   /* Primary Blue — the single brand hero color */
  --soft-blue:      #A7C2E7;   /* Soft Blue — supportive */
  --light-blue:     #D3E1F3;   /* Light Blue — backgrounds, subtle fills */
  --dark-grey:      #605F5E;   /* Dark Grey — body copy */
  --grey:           #A09F9E;   /* Grey — secondary copy, dividers */
  --silver-grey:    #B9B8B5;   /* Silver Grey — muted accents */
  --light-grey:     #F1F1F0;   /* Light Grey — page backgrounds */

  /* Note: the book labels one swatch "Blue #F1F1F0" which is the same hex as
     Light Grey — we treat it as a page-background token rather than a blue. */

  /* ---- Accent / status palette (from brand book p.23) ---- */
  --accent-red:     #E34A6B;   /* Red */
  --accent-green:   #E34A6B;   /* Green — note: book has same hex as red; likely a
                                  book typo. We keep the declared value but alias
                                  a usable green below. */
  --usable-green:   #2FA46B;   /* Usable green, harmonised with the palette */
  --accent-yellow:  #FDBD1A;   /* Yellow */
  --accent-violet:  #C84DE1;   /* Violette */

  /* ---- Neutrals (derived, black/white) ---- */
  --black:          #1A1A1A;
  --white:          #FFFFFF;

  /* ---- Semantic foregrounds ---- */
  --fg-1:           var(--dark-grey);     /* primary body text */
  --fg-2:           #696867;              /* secondary / captions — WCAG AA on white */
  --fg-3:           var(--silver-grey);   /* tertiary / disabled */
  --fg-on-primary:  var(--white);         /* text on --primary-blue */
  --fg-display:     #2B2B2A;              /* slightly darker than dark-grey for big text */

  /* ---- Semantic backgrounds ---- */
  --bg-page:        var(--white);
  --bg-subtle:      var(--light-grey);    /* section backgrounds */
  --bg-tint:        var(--light-blue);    /* brand-tinted background */
  --bg-inverse:     var(--black);
  --bg-hero:        var(--primary-blue);  /* big brand moments */

  /* ---- Semantic strokes ---- */
  --border-hairline: #E6E6E4;             /* ~5% over light-grey */
  --border-subtle:   #D8D7D5;
  --border-strong:   var(--silver-grey);

  /* ---- Semantic intents ---- */
  --intent-info:    var(--primary-blue);
  --intent-success: var(--usable-green);
  --intent-warn:    var(--accent-yellow);
  --intent-danger:  var(--accent-red);

  /* ---- Type family ---- */
  --font-sans:    "Segoe UI", "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI", "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "SF Mono", "Consolas", "Menlo", ui-monospace, monospace;

  /* ---- Type scale (based on 16px root, brand-book headings read tight) ---- */
  --fs-display-xl: 88px;   --lh-display-xl: 1.02;   --lt-display-xl: -0.03em;
  --fs-display:    64px;   --lh-display:    1.06;   --lt-display:    -0.025em;
  --fs-h1:         44px;   --lh-h1:         1.1;    --lt-h1:         -0.02em;
  --fs-h2:         32px;   --lh-h2:         1.15;   --lt-h2:         -0.015em;
  --fs-h3:         24px;   --lh-h3:         1.25;   --lt-h3:         -0.01em;
  --fs-h4:         20px;   --lh-h4:         1.3;    --lt-h4:         -0.005em;
  --fs-lead:       19px;   --lh-lead:       1.55;   --lt-lead:       0;
  --fs-body:       16px;   --lh-body:       1.6;    --lt-body:       0;
  --fs-small:      14px;   --lh-small:      1.5;    --lt-small:      0;
  --fs-caption:    12px;   --lh-caption:    1.4;    --lt-caption:    0.01em;
  --fs-eyebrow:    12px;   --lh-eyebrow:    1.2;    --lt-eyebrow:    0.14em;

  /* ---- Weights ---- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---- Spacing scale (4-based) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ---- Radii (brand book shows gently rounded cards + pill CTAs) ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Elevation (soft, blue-tinted — matches brand mood) ---- */
  --shadow-1: 0 1px 2px rgba(50, 105, 180, 0.06), 0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow-2: 0 4px 12px rgba(50, 105, 180, 0.10), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-3: 0 10px 28px rgba(50, 105, 180, 0.14), 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-hero: 0 30px 80px -24px rgba(50, 105, 180, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.10);
  --shadow-inset: inset 0 0 0 1px rgba(50, 105, 180, 0.08);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   360ms;
}

/* ==========================================================================
   Semantic element styles — drop-in for HTML content
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--lt-display-xl);
  font-weight: var(--fw-light);
  color: var(--fg-display);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--lt-display);
  font-weight: var(--fw-light);
  color: var(--fg-display);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--lt-h1);
  font-weight: var(--fw-semi);
  color: var(--fg-display);
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--lt-h2);
  font-weight: var(--fw-semi);
  color: var(--fg-display);
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--lt-h3);
  font-weight: var(--fw-semi);
  color: var(--fg-display);
}

h4, .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--lt-h4);
  font-weight: var(--fw-semi);
  color: var(--fg-display);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

small, .small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-2);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--lt-caption);
  color: var(--fg-2);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--lt-eyebrow);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  color: var(--primary-blue);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
}

a {
  color: var(--primary-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
a:hover { border-bottom-color: currentColor; }
a:active { color: #285592; }
footer a { color: inherit; border-bottom: none; }

hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: var(--s-6) 0;
}

::selection {
  background: var(--light-blue);
  color: var(--fg-display);
}

/* ==========================================================================
   Shared component utilities
   ========================================================================== */

/* Skip link (accessibility) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background: var(--primary-blue);
  color: var(--white);
  border-radius: var(--r-sm);
  font-weight: var(--fw-semi);
  z-index: 9999;
  text-decoration: none;
  border-bottom: none;
}

/* Registered trademark mark */
sup.reg { font-size: 0.6em; font-weight: 400; vertical-align: super; position: relative; top: -3px; }

/* Brand wordmark */
.word-deepIng { letter-spacing: -0.02em; }
.word-deepIng .deep { font-weight: var(--fw-bold); color: var(--primary-blue); }
.word-deepIng .ing  { font-weight: var(--fw-bold); color: var(--dark-grey); }

/* Display style variant */
.display-light { font-weight: var(--fw-light); letter-spacing: -0.025em; }

/* Buttons */
.btn-primary {
  background: var(--primary-blue);
  color: var(--white);
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-weight: var(--fw-semi);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  text-decoration: none;
  border-bottom: none;
}
.btn-primary:hover { background: #285592; border-bottom: none; }
.btn-primary:active { transform: scale(.97); }

.btn-ghost {
  background: transparent;
  color: var(--fg-display);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-weight: var(--fw-semi);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  text-decoration: none;
}
.btn-ghost:hover {
  background: var(--light-blue);
  border-color: var(--soft-blue);
  border-bottom-color: var(--soft-blue);
}

.btn-on-dark {
  background: #f5aa00;
  color: #0a0a0a;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  border-bottom: none;
}

/* Cards */
.card-hover {
  transition: transform var(--dur-normal) var(--ease-standard), box-shadow var(--dur-normal) var(--ease-standard);
}
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }

/* Section spacing */
.section { padding: var(--s-9) 0; }
@media (max-width: 768px) { .section { padding: var(--s-8) 0; } }

/* Dark surface heading overrides */
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

/* Nav dropdown shadow (replaces Tailwind shadow-lift) */
.nav-dropdown { box-shadow: var(--shadow-3); pointer-events: none; }
.group:hover .nav-dropdown { pointer-events: auto; }

/* Bridge the gap between trigger and dropdown so hover isn't lost mid-move */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* ==========================================================================
   Mobile navigation
   ========================================================================== */

.nav-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  color: #2B2B2A;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast);
}
.nav-burger:hover { background: var(--light-grey); }
.nav-burger svg { width: 22px; height: 22px; }
@media (min-width: 1024px) { .nav-burger { display: none; } }

.site-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  flex-direction: column;
  padding: 68px 24px 24px 36px;
  overflow-y: auto;
}
.site-mobile-menu.open { display: flex; }

.site-mobile-menu::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: #fff;
  z-index: -1;
  box-shadow: var(--shadow-hero);
}

.mobile-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--light-grey);
  border-radius: var(--r-sm);
  font-size: 18px;
  cursor: pointer;
  z-index: 1;
}

.site-mobile-menu a,
.site-mobile-menu .mm-section {
  align-self: flex-end;
  width: calc(min(320px, 85vw) - 48px);
  padding: 7px 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 15px;
  color: var(--fg-display);
  text-decoration: none;
  border-bottom-color: var(--border-hairline);
  display: block;
}
.site-mobile-menu a:hover { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }
.site-mobile-menu a:last-child { border-bottom: none; }

.site-mobile-menu .mm-section {
  font-size: 11px;
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding-top: 12px;
  padding-bottom: 2px;
  border-bottom: none;
}

.site-mobile-menu .mm-indent { padding-left: 12px; font-size: 15px; }

.site-mobile-menu .mm-cta {
  margin-top: 10px;
  background: var(--primary-blue);
  color: var(--white);
  padding: 14px 20px;
  border-radius: var(--r-pill);
  font-weight: var(--fw-semi);
  text-align: center;
  justify-content: center;
  border-bottom: none;
}
.site-mobile-menu .mm-cta:hover { background: #285592; border-bottom: none; color: var(--white); }