/* ==========================================================================
   SynergyApex — theme.css
   Design tokens, CSS reset, base typography, utilities.
   LIGHT LUXURY THEME.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* ---- Surfaces (light) ---- */
  --bg:            #FFFFFF;
  --bg-alt:        #F7F9FC;   /* section banding */
  --bg-soft:       #EFF4FA;   /* tinted panels */
  --bg-tint:       #F4F8FD;   /* very soft blue wash */
  --surface:       #FFFFFF;   /* cards */
  --surface-2:     #FBFCFE;

  /* ---- Ink / text ---- */
  --ink:           #0E2murky; /* replaced below */
  --ink-900:       #0C1E3C;   /* headings, deepest navy */
  --ink-800:       #12294B;
  --ink-700:       #1B3A63;
  --body:          #4C5D75;   /* body copy */
  --muted:         #6F819B;
  --muted-2:       #94A3B8;

  /* ---- Brand navy (headers, footers, dark bands) ---- */
  --navy:          #0B1E3D;
  --navy-2:        #102A52;
  --navy-3:        #16386A;

  /* ---- Accents ---- */
  --gold:          #B8912A;   /* AA-contrast gold for text on light */
  --gold-2:        #D4AF37;   /* decorative gold */
  --gold-3:        #EBD489;   /* light gold wash */
  --gold-soft:     #FBF6E6;
  --cyan:          #0E7FA8;   /* AA-contrast cyan for text on light */
  --cyan-2:        #1FA0CE;
  --cyan-3:        #7FD0EC;
  --cyan-soft:     #EDF7FC;

  /* ---- Lines ---- */
  --line:          #E4EBF4;
  --line-2:        #D7E1EE;
  --line-dark:     rgba(255,255,255,.14);

  /* ---- Gradients ---- */
  --grad-gold:     linear-gradient(135deg,#E3C158 0%,#C29B2E 48%,#A87F1E 100%);
  --grad-lux:      linear-gradient(110deg,#C29B2E 0%,#D4AF37 38%,#1FA0CE 100%);
  --grad-cyan:     linear-gradient(135deg,#1FA0CE 0%,#0E7FA8 100%);
  --grad-navy:     linear-gradient(140deg,#0B1E3D 0%,#102A52 55%,#16386A 100%);

  /* ---- Elevation (soft, luxury — never harsh) ---- */
  --sh-xs:  0 1px 2px rgba(12,30,60,.05);
  --sh-sm:  0 2px 8px rgba(12,30,60,.06);
  --sh-md:  0 10px 30px -12px rgba(12,30,60,.16);
  --sh-lg:  0 24px 60px -26px rgba(12,30,60,.22);
  --sh-gold:0 20px 46px -22px rgba(184,145,42,.42);
  --sh-cyan:0 20px 46px -22px rgba(14,127,168,.34);

  /* ---- Motion (SNAPPY — deliberately short) ---- */
  --t-fast:  .18s;
  --t:       .28s;
  --t-slow:  .42s;
  --ease:    cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.4,0,.2,1);

  /* ---- Layout ---- */
  --maxw:    1240px;
  --gut:     24px;
  --nav-h:   84px;
  --nav-h-sm:66px;
  --radius:  16px;
  --radius-lg:22px;

  /* ---- Type ---- */
  --font-display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
:root{ --ink: #0C1E3C; } /* canonical ink */

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h-sm) + 16px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; transition:color var(--t) var(--ease-io); }
button{ font-family:inherit; }
ul,ol{ list-style:none; margin:0; padding:0; }
figure{ margin:0; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.022em;
  margin:0;
}
p{ margin:0; }
strong,b{ font-weight:600; color:var(--ink-700); }

::selection{ background:rgba(184,145,42,.22); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

/* Scrollbar — light */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#EEF2F8; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#C9D5E5,#AEBECF);
  border-radius:20px; border:3px solid #EEF2F8;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#C29B2E,#A87F1E); }

/* Skip link */
.skip{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
  font-size:.88rem; font-weight:600;
}
.skip:focus{ left:0; }

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */
.t-display{ font-size:clamp(2.3rem,5.2vw,4rem);   font-weight:800; letter-spacing:-.035em; line-height:1.06; }
.t-h1{      font-size:clamp(2rem,4.2vw,3.15rem);  font-weight:800; letter-spacing:-.032em; line-height:1.1;  }
.t-h2{      font-size:clamp(1.72rem,3.4vw,2.6rem);font-weight:700; letter-spacing:-.028em; line-height:1.14; }
.t-h3{      font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700; letter-spacing:-.02em;  line-height:1.24; }
.t-h4{      font-size:1.1rem;  font-weight:700; letter-spacing:-.014em; }
.t-lead{    font-size:clamp(1.02rem,1.5vw,1.17rem); color:var(--body); line-height:1.7; }
.t-body{    font-size:.965rem; color:var(--body); }
.t-sm{      font-size:.875rem; color:var(--muted); }
.t-xs{      font-size:.78rem;  color:var(--muted); }

/* --------------------------------------------------------------------------
   4. UTILITIES
   -------------------------------------------------------------------------- */
.u-gold{ color:var(--gold); }
.u-cyan{ color:var(--cyan); }
.u-ink{ color:var(--ink); }
.u-muted{ color:var(--muted); }
.u-white{ color:#fff; }

.u-grad-gold{
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.u-grad-lux{
  background:var(--grad-lux);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.u-center{ text-align:center; }
.u-mxauto{ margin-inline:auto; }
.u-mb0{ margin-bottom:0 !important; }
.u-mt-0{ margin-top:0 !important; }
.u-nowrap{ white-space:nowrap; }
.u-rel{ position:relative; }
.u-hide{ display:none !important; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Hairline rule with gradient bloom */
.u-hairline{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent);
}

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

/* --------------------------------------------------------------------------
   6. PRINT
   -------------------------------------------------------------------------- */
@media print{
  .sa-nav,.sa-footer,.to-top,.hero-media,.mobile-menu,.nav-scrim{ display:none !important; }
  body{ color:#000; background:#fff; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.75em; color:#555; }
}