/* ============================================================
   neu.css — neumorphism surface layer for The Collaboratory v3
   ------------------------------------------------------------
   Layered ON TOP of glassmorphism. The two systems split by role:
     GLASS  -> big panels: cards, services, form, sticky approach,
              nav bar, mobile drawer (frosted planes of glass)
     NEU    -> small tactile objects: theme toggle, chips, buttons,
              stat numbers, step numbers, form inputs, social icons
              (physical surfaces pushed into / lifted from the base)

   Neumorphism can't exist on transparent backgrounds — it needs a
   solid base to cast its soft 2-shadow pair (one light, one dark).
   So we never apply neu to a glass panel; only to fully-opaque
   island objects that sit on top of glass.

   This thrives on the brand's monochrome (ink/silver/white) palette
   because neumorphism is fundamentally about light/dark shadow
   pairs, not color. Each neu class reads as a monochrome "pebble".

   Theme-aware via --neu-* vars (defined per theme below). Numbers
   and text inside neu objects inherit the existing --fg-* tokens so
   WCAG AA contrast holds without re-tuning component CSS.
   ============================================================ */

/* --- Theme hooks ------------------------------------------------
   --neu-bg       : the opaque fill the object is "pressed from"
   --neu-light    : the highlight shadow (top-left light direction)
   --neu-dark     : the deep shadow (bottom-right direction)
   --neu-soft     : a faint penumbra for ambient spread
   ---------------------------------------------------------------- */

:root {
  --neu-bg:    var(--ink-700);     /* #1A1A1C on dark */
  --neu-light: rgba(255,255,255,0.08);
  --neu-dark:  rgba(0,0,0,0.55);
  --neu-soft:  rgba(0,0,0,0.20);
  --neu-dist:  6px;                /* default shadow offset */
}

:root[data-theme="light"] {
  --neu-bg:    #EDEDED;            /* light silver panel, per logo spec */
  --neu-light: #FFFFFF;
  --neu-dark:  rgba(166, 166, 166, 0.55);   /* spec silver #A9A9A9 */
  --neu-soft:  rgba(184, 184, 184, 0.35);  /* spec silver #B8B8B8 */
  --neu-dist:  6px;
}

/* --- Base: opaque fill so the 2-shadows read ------------------ */
.neu {
  background: var(--neu-bg);
  border: 1px solid transparent;
  border-radius: 16px;
  transition: box-shadow var(--dur) var(--ease-soft),
              transform var(--dur-fast) var(--ease-precise),
              border-color var(--dur-fast) var(--ease-precise);
}

/* --- Raised: looks pulled out of the surface ------------------ */
.neu--raised {
  box-shadow:
    calc(var(--neu-dist) * -1) calc(var(--neu-dist) * -1) calc(var(--neu-dist) * 2) var(--neu-light),
    var(--neu-dist) var(--neu-dist) calc(var(--neu-dist) * 2) var(--neu-dark);
}

/* --- Pressed: looks pushed into the surface ------------------- */
.neu--pressed {
  box-shadow:
    inset calc(var(--neu-dist) * -0.6) calc(var(--neu-dist) * -0.6) calc(var(--neu-dist) * 1.2) var(--neu-light),
    inset var(--neu-dist) var(--neu-dist) calc(var(--neu-dist) * 1.4) var(--neu-dark);
}

/* --- Soft: subtle ambient lift (mild raised) ------------------ */
.neu--soft {
  box-shadow:
    calc(var(--neu-dist) * -0.5) calc(var(--neu-dist) * -0.5) calc(var(--neu-dist) * 1.5) var(--neu-soft),
    calc(var(--neu-dist) * 0.5) calc(var(--neu-dist) * 0.5) calc(var(--neu-dist) * 1.5) var(--neu-soft);
}

/* --- Rounded variants (matching existing component radii) ----- */
.neu--pill { border-radius: 999px; }
.neu--circle { border-radius: 50%; }
.neu--sm { border-radius: 12px; }

/* --- Interactive behaviour ------------------------------------
   Raised objects press inward on hover/active — gives the
   "physical button" click feel without a JS state machine.
   ------------------------------------------------------------- */
.neu--raised:hover,
.neu--raised:focus-visible {
  box-shadow:
    calc(var(--neu-dist) * -1.2) calc(var(--neu-dist) * -1.2) calc(var(--neu-dist) * 2.4) var(--neu-light),
    var(--neu-dist) var(--neu-dist) calc(var(--neu-dist) * 2.4) var(--neu-dark);
  transform: translateY(-1px);
}
.neu--raised:active,
.neu--raised.is-active {
  box-shadow:
    inset calc(var(--neu-dist) * -0.6) calc(var(--neu-dist) * -0.6) calc(var(--neu-dist) * 1.2) var(--neu-light),
    inset var(--neu-dist) var(--neu-dist) calc(var(--neu-dist) * 1.4) var(--neu-dark);
  transform: translateY(0);
}

.neu--pressed:hover,
.neu--pressed:focus-visible {
  box-shadow:
    inset calc(var(--neu-dist) * -0.8) calc(var(--neu-dist) * -0.8) calc(var(--neu-dist) * 1.4) var(--neu-light),
    inset var(--neu-dist) var(--neu-dist) calc(var(--neu-dist) * 1.7) var(--neu-dark);
}

/* --- High-contrast mode: kill the soft shadows so edges stay crisp */
@media (prefers-contrast: more) {
  .neu, .neu--raised, .neu--pressed, .neu--soft {
    border-color: rgba(255,255,255,0.20);
    box-shadow: none;
  }
  :root[data-theme="light"] .neu,
    :root[data-theme="light"] .neu--raised,
    :root[data-theme="light"] .neu--pressed,
    :root[data-theme="light"] .neu--soft {
    border-color: rgba(26,26,26,0.30);
    box-shadow: none;
  }
}

/* --- Reduced motion: keep the shadows, skip the hover transforms */
@media (prefers-reduced-motion: reduce) {
  .neu, .neu--raised, .neu--pressed, .neu--soft {
    transition: none;
  }
  .neu--raised:hover,
  .neu--raised:focus-visible,
  .neu--raised:active {
    transform: none;
  }
}

/* --- Component adapters --------------------------------------
   These map the neu look onto existing objects WITHOUT removing
   prior styling classes. We only swap box-shadow + background to
   the neumorphism pair, and let the component's own color/border/
   padding rules stay intact.
   ------------------------------------------------------------- */

/* Theme toggle switch track */
.neu .theme-toggle__track,
.theme-toggle.neu .theme-toggle__track {
  background: var(--neu-bg);
  box-shadow:
    inset 3px 3px 6px var(--neu-dark),
    inset -3px -3px 6px var(--neu-light);
  border: 1px solid transparent;
}

/* Theme toggle thumb */
.neu .theme-toggle__thumb,
.theme-toggle.neu .theme-toggle__thumb {
  box-shadow:
    -2px -2px 4px var(--neu-light),
    2px 2px 4px var(--neu-dark);
}

/* Chips (mailto/tel/instagram) */
.chip.neu {
  background: var(--neu-bg);
  border-color: transparent;
  box-shadow:
    calc(var(--neu-dist) * -0.6) calc(var(--neu-dist) * -0.6) calc(var(--neu-dist) * 1.4) var(--neu-light),
    calc(var(--neu-dist) * 0.6) calc(var(--neu-dist) * 0.6) calc(var(--neu-dist) * 1.4) var(--neu-dark);
}
.chip.neu:hover {
  box-shadow:
    calc(var(--neu-dist) * -0.9) calc(var(--neu-dist) * -0.9) calc(var(--neu-dist) * 1.8) var(--neu-light),
    calc(var(--neu-dist) * 0.9) calc(var(--neu-dist) * 0.9) calc(var(--neu-dist) * 1.8) var(--neu-dark);
  transform: translateY(-1px);
}

/* Stat number pebble — the big "5+" / "∞" / "1" inside stat cards */
.stat__num.neu {
  display: inline-grid;
  place-items: center;
  width: clamp(64px, 11vw, 96px);
  height: clamp(64px, 11vw, 96px);
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow:
    inset 4px 4px 8px var(--neu-dark),
    inset -4px -4px 8px var(--neu-light);
}

/* Step number pebble (approach steps) */
.step__num.neu {
  display: inline-grid;
  place-items: center;
  width: clamp(54px, 7vw, 72px);
  height: clamp(54px, 7vw, 72px);
  padding: 0;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow:
    inset 3px 3px 6px var(--neu-dark),
    inset -3px -3px 6px var(--neu-light);
  line-height: 0;
}

/* Form fields — inset (looks pressed in, like glass carved into the panel) */
.form input.neu,
.form select.neu,
.form textarea.neu {
  background: var(--neu-bg);
  border-color: transparent;
  box-shadow:
    inset var(--neu-dist) var(--neu-dist) calc(var(--neu-dist) * 1.5) var(--neu-dark),
    inset calc(var(--neu-dist) * -1) calc(var(--neu-dist) * -1) calc(var(--neu-dist) * 1.5) var(--neu-light);
}
.form input.neu:focus,
.form select.neu:focus,
.form textarea.neu:focus {
  box-shadow:
    inset calc(var(--neu-dist) * 1.2) calc(var(--neu-dist) * 1.2) calc(var(--neu-dist) * 1.8) var(--neu-dark),
    inset calc(var(--neu-dist) * -1.2) calc(var(--neu-dist) * -1.2) calc(var(--neu-dist) * 1.8) var(--neu-light);
}

/* Primary button — raised clicky pebble */
.btn--primary.neu {
  background: var(--neu-bg);
  color: var(--fg-100);
  box-shadow:
    -3px -3px 7px var(--neu-light),
    3px 3px 7px var(--neu-dark),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn--primary.neu:hover {
  box-shadow:
    -4px -4px 10px var(--neu-light),
    4px 4px 10px var(--neu-dark);
  transform: translateY(-1px);
}
.btn--primary.neu:active {
  box-shadow:
    inset -2px -2px 5px var(--neu-light),
    inset 2px 2px 5px var(--neu-dark);
  transform: translateY(0);
}

/* Ghost button — slightly subtler raised */
.btn--ghost.neu {
  background: var(--neu-bg);
  border-color: transparent;
  color: var(--fg-100);
  box-shadow:
    calc(var(--neu-dist) * -0.6) calc(var(--neu-dist) * -0.6) calc(var(--neu-dist) * 1.3) var(--neu-light),
    calc(var(--neu-dist) * 0.6) calc(var(--neu-dist) * 0.6) calc(var(--neu-dist) * 1.3) var(--neu-dark);
}
.btn--ghost.neu:hover {
  transform: translateY(-1px);
  box-shadow:
    calc(var(--neu-dist) * -0.9) calc(var(--neu-dist) * -0.9) calc(var(--neu-dist) * 1.8) var(--neu-light),
    calc(var(--neu-dist) * 0.9) calc(var(--neu-dist) * 0.9) calc(var(--neu-dist) * 1.8) var(--neu-dark);
}

/* Nav hamburger plates (when visible on mobile) */
.nav__toggle.neu {
  background: var(--neu-bg);
  border-color: transparent;
  box-shadow:
    -3px -3px 6px var(--neu-light),
    3px 3px 6px var(--neu-dark);
}
.nav__toggle.neu:active {
  box-shadow:
    inset -2px -2px 4px var(--neu-light),
    inset 2px 2px 4px var(--neu-dark);
}