/* ============================================================================
 * Adender.com — theme.css
 * Light-premium design system: tokens, typography, base elements.
 * All colors, spacing and typography MUST come from variables here.
 * No hardcoded HEX in templates, components.css or layout.css.
 * ==========================================================================*/

:root {
  /* ---- Neutrals ---- */
  --ad-white:           #FFFFFF;
  --ad-paper:           #FAFBFD;
  --ad-off-white:       #F5F7FB;
  --ad-mist:            #EEF1F7;
  --ad-line:            #E5E9F2;
  --ad-line-strong:     #CFD6E2;

  /* ---- Ink / text ---- */
  --ad-ink:             #0A1225;
  --ad-ink-2:           #17213C;
  --ad-muted:           #525B76;
  --ad-subtle:          #8088A0;
  --ad-inverse:         #FFFFFF;

  /* ---- Brand navy ---- */
  --ad-navy-900:        #060B1A;
  --ad-navy-800:        #0A1225;
  --ad-navy-700:        #0F2544;
  --ad-navy-600:        #153258;
  --ad-navy-500:        #1E3A66;
  --ad-navy-200:        #D9E1EF;
  --ad-navy-100:        #E8EDF7;
  --ad-navy-50:         #F1F4FA;

  /* ---- Signature accent (electric blue) — used sparingly ---- */
  --ad-accent:          #2957E6;
  --ad-accent-600:      #1E47C9;
  --ad-accent-100:      #E6EDFE;
  --ad-accent-50:       #F2F5FF;

  /* ---- Highlight (warm, for badges/awards only) ---- */
  --ad-gold:            #D4A94A;
  --ad-gold-50:         #FBF6E7;

  /* ---- Feedback ---- */
  --ad-success:         #0E9F6E;
  --ad-success-50:      #E7F7EF;
  --ad-warning:         #D98B00;
  --ad-warning-50:      #FDF3DF;
  --ad-danger:          #DC2626;
  --ad-danger-50:       #FCEAEA;
  --ad-info:            #0284C7;
  --ad-info-50:         #E3F2FC;

  /* ---- Semantic aliases (kept for convenience) ---- */
  --ad-primary:         var(--ad-navy-800);
  --ad-primary-dark:    var(--ad-navy-900);
  --ad-primary-soft:    var(--ad-navy-100);
  --ad-bg:              var(--ad-white);
  --ad-bg-alt:          var(--ad-off-white);
  --ad-surface:         var(--ad-white);
  --ad-border:          var(--ad-line);
  --ad-border-strong:   var(--ad-line-strong);
  --ad-text:            var(--ad-ink);
  --ad-text-muted:      var(--ad-muted);
  --ad-text-subtle:     var(--ad-subtle);
  --ad-text-inverse:    var(--ad-inverse);

  /* ---- Typography ---- */
  --ad-font-display:    "Space Grotesk", "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ad-font-ui:         "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ad-font-mono:       ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --ad-fs-xs:           12px;
  --ad-fs-sm:           13px;
  --ad-fs-base:         16px;
  --ad-fs-md:           17px;
  --ad-fs-lg:           19px;
  --ad-fs-xl:           22px;

  /* Display scale — fluid, clamp(min, preferred, max) */
  --ad-fs-h3:           clamp(20px, 1.6vw, 24px);
  --ad-fs-h2:           clamp(28px, 3.2vw, 42px);
  --ad-fs-h1:           clamp(34px, 4.2vw, 56px);
  --ad-fs-display:      clamp(40px, 6vw, 80px);
  --ad-fs-display-sm:   clamp(30px, 4vw, 48px);

  --ad-lh-tight:        1.05;
  --ad-lh-snug:         1.18;
  --ad-lh-base:         1.6;
  --ad-lh-loose:        1.75;

  --ad-ls-display:      -0.025em;
  --ad-ls-tight:        -0.015em;
  --ad-ls-wide:         0.02em;
  --ad-ls-caps:         0.12em;

  /* ---- Spacing scale (8px base) ---- */
  --ad-sp-1:            4px;
  --ad-sp-2:            8px;
  --ad-sp-3:            12px;
  --ad-sp-4:            16px;
  --ad-sp-5:            20px;
  --ad-sp-6:            24px;
  --ad-sp-7:            32px;
  --ad-sp-8:            40px;
  --ad-sp-9:            56px;
  --ad-sp-10:           72px;
  --ad-sp-11:           96px;

  /* ---- Radii ---- */
  --ad-radius-xs:       4px;
  --ad-radius-sm:       8px;
  --ad-radius:          12px;
  --ad-radius-md:       14px;
  --ad-radius-lg:       20px;
  --ad-radius-xl:       28px;
  --ad-radius-2xl:      40px;
  --ad-radius-pill:     999px;

  /* ---- Shadows (layered, low-contrast) ---- */
  --ad-shadow-xs:       0 1px 2px rgba(10, 18, 37, .04), 0 1px 3px rgba(10, 18, 37, .03);
  --ad-shadow-sm:       0 2px 4px rgba(10, 18, 37, .04), 0 6px 16px rgba(10, 18, 37, .06);
  --ad-shadow:          0 4px 10px rgba(10, 18, 37, .05), 0 16px 40px rgba(10, 18, 37, .08);
  --ad-shadow-lg:       0 10px 24px rgba(10, 18, 37, .07), 0 32px 80px rgba(10, 18, 37, .12);
  --ad-shadow-focus:    0 0 0 4px rgba(41, 87, 230, .18);
  --ad-shadow-inset:    inset 0 1px 0 rgba(255, 255, 255, .6);

  /* ---- Transitions ---- */
  --ad-ease-out:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ad-ease-spring:     cubic-bezier(0.16, 1, 0.3, 1);
  --ad-dur-fast:        150ms;
  --ad-dur-base:        240ms;
  --ad-dur-slow:        500ms;

  /* ---- Layout ---- */
  --ad-container:       1240px;
  --ad-container-wide:  1400px;
  --ad-container-pad:   24px;
  --ad-section-py:      clamp(80px, 10vw, 144px);
  --ad-section-py-sm:   clamp(56px, 7vw, 88px);

  /* ---- Navbar ---- */
  --ad-nav-h:           72px;
  --ad-nav-h-scrolled:  64px;

  /* ---- Bootstrap overrides ---- */
  --bs-primary:         var(--ad-navy-800);
  --bs-primary-rgb:     10, 18, 37;
  --bs-body-color:      var(--ad-ink);
  --bs-body-bg:         var(--ad-white);
  --bs-border-color:    var(--ad-line);
  --bs-link-color:      var(--ad-accent);
  --bs-link-hover-color: var(--ad-navy-800);
  --bs-font-sans-serif: var(--ad-font-ui);
}

/* ============================================================================
 * Base elements
 * ==========================================================================*/

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Prevent horizontal scroll. `clip` (not `hidden`) is used so that
     `position: sticky` on .ad-nav keeps working — `overflow: hidden`
     on an ancestor breaks sticky positioning, `clip` does not. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ad-bg);
  color: var(--ad-text);
  font-family: var(--ad-font-ui);
  font-size: var(--ad-fs-base);
  line-height: var(--ad-lh-base);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  max-width: 100%;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ad-font-display);
  color: var(--ad-ink);
  font-weight: 600;
  letter-spacing: var(--ad-ls-tight);
  line-height: var(--ad-lh-snug);
  margin: 0 0 .5em;
}

h1, .h1 { font-size: var(--ad-fs-h1); letter-spacing: var(--ad-ls-display); line-height: var(--ad-lh-tight); }
h2, .h2 { font-size: var(--ad-fs-h2); letter-spacing: var(--ad-ls-display); line-height: 1.12; }
h3, .h3 { font-size: var(--ad-fs-h3); font-weight: 600; }

/* Display utility classes */
.ad-display {
  font-family: var(--ad-font-display);
  font-size: var(--ad-fs-display);
  letter-spacing: var(--ad-ls-display);
  line-height: var(--ad-lh-tight);
  font-weight: 600;
  color: var(--ad-ink);
  margin: 0;
}
.ad-display--sm {
  font-size: var(--ad-fs-display-sm);
  line-height: 1.08;
}

p {
  margin: 0 0 1em;
  color: var(--ad-text);
}
p:last-child { margin-bottom: 0; }

.ad-lead {
  font-size: var(--ad-fs-lg);
  line-height: var(--ad-lh-base);
  color: var(--ad-muted);
  max-width: 62ch;
}

a {
  color: var(--ad-accent);
  text-decoration: none;
  transition: color var(--ad-dur-fast) var(--ad-ease-out);
}
a:hover { color: var(--ad-navy-700); }

small { font-size: var(--ad-fs-sm); color: var(--ad-muted); }

code, kbd, samp, pre { font-family: var(--ad-font-mono); font-size: 0.9em; }

hr {
  border: 0;
  height: 1px;
  background: var(--ad-line);
  margin: var(--ad-sp-8) 0;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

::selection {
  background: var(--ad-navy-800);
  color: var(--ad-inverse);
}

/* ============================================================================
 * Container
 * ==========================================================================*/

.container,
.container-fluid {
  width: 100%;
  max-width: var(--ad-container);
  padding-left: var(--ad-container-pad);
  padding-right: var(--ad-container-pad);
  margin-left: auto;
  margin-right: auto;
}

.container-wide { max-width: var(--ad-container-wide); }

@media (max-width: 576px) {
  :root { --ad-container-pad: 18px; }
}

/* ============================================================================
 * Focus-visible
 * ==========================================================================*/

:focus-visible {
  outline: 2px solid var(--ad-accent);
  outline-offset: 2px;
  border-radius: var(--ad-radius-xs);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: var(--ad-shadow-focus);
  outline-color: var(--ad-accent);
}

/* ============================================================================
 * Utility atoms
 * ==========================================================================*/

.ad-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ad-font-ui);
  font-size: var(--ad-fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ad-ls-caps);
  color: var(--ad-navy-700);
  margin: 0 0 var(--ad-sp-4);
}
.ad-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ad-accent);
}

.ad-eyebrow--muted { color: var(--ad-muted); }
.ad-eyebrow--inverse { color: rgba(255,255,255,.8); }
.ad-eyebrow--inverse::before { background: var(--ad-gold); }

.ad-mini-heading {
  text-align: center;
  font-family: var(--ad-font-ui);
  font-size: var(--ad-fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ad-ls-caps);
  color: var(--ad-subtle);
  margin: 0 0 var(--ad-sp-7);
}

.ad-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ad-font-ui);
  font-weight: 600;
  font-size: var(--ad-fs-sm);
  color: var(--ad-navy-800);
  transition: color var(--ad-dur-fast) var(--ad-ease-out), gap var(--ad-dur-fast) var(--ad-ease-out);
}
.ad-link-arrow::after {
  content: "→";
  transition: transform var(--ad-dur-base) var(--ad-ease-spring);
  display: inline-block;
}
.ad-link-arrow:hover { color: var(--ad-accent); gap: 10px; }
.ad-link-arrow:hover::after { transform: translateX(2px); }

/* Text utilities */
.ad-t-balance { text-wrap: balance; }
.ad-t-pretty  { text-wrap: pretty; }
.ad-muted     { color: var(--ad-muted) !important; }
.ad-subtle    { color: var(--ad-subtle) !important; }
.ad-ink       { color: var(--ad-ink) !important; }

/* Background utilities */
.ad-bg-alt    { background: var(--ad-bg-alt); }
.ad-bg-navy   { background: var(--ad-navy-800); color: var(--ad-inverse); }
.ad-bg-navy-2 { background: var(--ad-navy-900); color: var(--ad-inverse); }

/* Fine divider */
.ad-hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ad-line-strong), transparent);
  margin: var(--ad-sp-8) 0;
}

/* Skip link */
.ad-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 8px 12px;
  background: var(--ad-navy-800);
  color: var(--ad-inverse);
  border-radius: var(--ad-radius-sm);
  z-index: 100;
}
.ad-skip:focus { left: 16px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}