/* Solid Series — REBRAND v2
   White-first, navy-pop, big-type, photo-driven */

/*
 * Variables bridge — design-system.css originally declared its own --navy
 * etc.; we alias them to the theme.json preset variables so theme.json is
 * the single source of truth for tokens.
 */
:root {
  --navy: var(--wp--preset--color--solid-navy);
  --navy-deep: var(--wp--preset--color--deep-navy);
  --navy-ink: #001445;
  --black: var(--wp--preset--color--ink-black);
  --white: var(--wp--preset--color--mat-white);
  --paper: var(--wp--preset--color--bone);
  --paper-2: #EAECEF;
  --line: rgba(11, 14, 20, 0.12);
  --line-strong: rgba(11, 14, 20, 0.25);
  --line-dark: rgba(255, 255, 255, 0.16);
  --line-dark-strong: rgba(255, 255, 255, 0.32);
  --ink-muted: rgba(11, 14, 20, 0.6);
  --alert: #FF4646;
  --font: var(--wp--preset--font-family--hanken-grotesk);
  --mono: var(--wp--preset--font-family--jetbrains-mono);
}

.ss-root, .ss-root * { box-sizing: border-box; }
.ss-root {
  font-family: var(--font);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  line-height: 1.4;
  font-weight: 400;
  background: var(--white);
}

/* ---------- TYPE ---------- */
.ss-eyebrow {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.ss-mega {
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.85;
  text-transform: uppercase;
  text-wrap: balance;
}
.ss-display {
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 0.9;
  text-transform: uppercase;
}
.ss-mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ss-tabular { font-feature-settings: "tnum" 1, "lnum" 1; }

/* ---------- BUTTONS ---------- */
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--font); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 12.5px; height: 50px; padding: 0 22px;
  border: 0; cursor: pointer; user-select: none; white-space: nowrap;
  transition: transform 100ms ease, background 120ms, color 120ms, box-shadow 120ms;
  position: relative;
}
.ss-btn-lg { height: 60px; padding: 0 30px; font-size: 13px; letter-spacing: 0.18em; }
.ss-btn-xl { height: 68px; padding: 0 36px; font-size: 14px; letter-spacing: 0.18em; }
.ss-btn-sm { height: 40px; padding: 0 16px; font-size: 11px; letter-spacing: 0.16em; }

/* Primary on white — solid navy with a hard offset shadow for ENERGY */
.ss-btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: 5px 5px 0 0 var(--black);
}
.ss-btn-primary:hover { background: var(--navy-deep); }

/* Primary on dark/photo — solid white with hard navy shadow */
.ss-btn-primary-on-dark {
  background: var(--white);
  color: var(--navy);
  box-shadow: 5px 5px 0 0 var(--navy-deep);
}

/* Loud variant — black with white text + navy offset */
.ss-btn-loud {
  background: var(--black);
  color: var(--white);
  box-shadow: 5px 5px 0 0 var(--navy);
}

/* Outline */
.ss-btn-outline {
  background: transparent;
  color: var(--black);
  box-shadow: inset 0 0 0 2px var(--black);
}
.ss-btn-outline-on-dark {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white);
}

/* Ghost text link */
.ss-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 12px; color: var(--black); cursor: pointer;
}
.ss-link::after {
  content: "→"; font-family: var(--mono); font-weight: 400;
  transform: translateX(0); transition: transform 120ms;
}
.ss-link-on-dark { color: var(--white); }

/* ---------- DIAMOND MOTIF ---------- */
.ss-mark {
  display: inline-block; aspect-ratio: 1;
  background-image: url("../img/logo-mark-black.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ss-mark-light { filter: invert(1) brightness(1.1); }
.ss-mark-navy { filter: invert(11%) sepia(98%) saturate(2880%) hue-rotate(217deg) brightness(40%); }

/* Solid diamond bullet */
.ss-diamond {
  display: inline-block;
  width: 7px; height: 7px;
  background: currentColor;
  transform: rotate(45deg);
}

/* ---------- PHOTO ---------- */
.ss-photo {
  position: relative; overflow: hidden;
  background-color: var(--navy-deep);
  background-size: cover; background-position: center;
}
.ss-photo-darken::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 60%, rgba(0,17,56,0.85) 100%);
  pointer-events: none;
}
.ss-photo-vignette::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 70% at 50% 60%, transparent 30%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.ss-photo-tag {
  position: absolute; bottom: 12px; left: 14px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,0.78);
}
.ss-photo-tag-tl { top: 12px; left: 14px; bottom: auto; }
.ss-photo-tag-tr { top: 12px; right: 14px; left: auto; bottom: auto; }

/* ---------- SURFACES ---------- */
.ss-surface-white { background: var(--white); color: var(--black); }
.ss-surface-paper { background: var(--paper); color: var(--black); }
.ss-surface-navy { background: var(--navy); color: var(--white); }
.ss-surface-navy-deep { background: var(--navy-deep); color: var(--white); }
.ss-surface-black { background: var(--black); color: var(--white); }

/* Hairlines */
.ss-rule { height: 1px; background: var(--line); border: 0; }
.ss-rule-strong { background: var(--line-strong); }
.ss-rule-dark { background: var(--line-dark); }

/* ---------- BADGES ---------- */
.ss-badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px;
  font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.ss-badge-fill-white { background: var(--white); color: var(--navy); }
.ss-badge-fill-navy { background: var(--navy); color: var(--white); }
.ss-badge-outline-navy { box-shadow: inset 0 0 0 1.5px var(--navy); color: var(--navy); }
.ss-badge-outline-white { box-shadow: inset 0 0 0 1.5px var(--white); color: var(--white); }
.ss-badge-loud { background: var(--black); color: var(--white); }

/* ---------- MARQUEE / TICKER ---------- */
.ss-marquee {
  display: flex; align-items: center; gap: 38px;
  white-space: nowrap; overflow: hidden;
}
.ss-marquee-track {
  display: flex; align-items: center; gap: 38px; white-space: nowrap;
  animation: ss-scroll 32s linear infinite;
}
@keyframes ss-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- CORNER BRACKETS (from logo geometry) ---------- */
.ss-bracket {
  position: relative;
}
.ss-bracket::before, .ss-bracket::after {
  content: ""; position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
}
.ss-bracket::before {
  top: 0; left: 0; border-right: 0; border-bottom: 0;
}
.ss-bracket::after {
  bottom: 0; right: 0; border-left: 0; border-top: 0;
}

/* ---------- DIAGONAL SLASH ---------- */
.ss-slash {
  position: relative;
}

/* ---------- DEVICE FRAME ---------- */
.ss-device-mobile {
  border-radius: 38px;
  overflow: hidden;
  box-shadow: 0 0 0 10px #1a1a1a, 0 0 0 11px #2a2a2a, 0 30px 60px -20px rgba(0,0,0,0.45);
}
.ss-statusbar {
  height: 36px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  font-family: var(--font); font-weight: 700; font-size: 13px;
}

/* ---------- STAT MEGA NUM ---------- */
.ss-stat-num {
  font-family: var(--font);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- ACCORDION ---------- */
.ss-acc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 4px; border-bottom: 1px solid var(--line-strong);
  font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; font-size: 13px; cursor: pointer;
}