/* ============================================================
   TRELLIS — EHCW staff platform · theme tokens
   Brand: EHCW sunny gold · sky blue · plum  (from logo)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spline+Sans+Mono:wght@400;500;600&family=Unbounded:wght@500;600;700&display=swap');

:root {
  --font-display: 'Sora', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-mono: 'Spline Sans Mono', monospace;

  /* brand anchors */
  --gold: oklch(0.87 0.155 96);
  --gold-deep: oklch(0.78 0.15 88);
  --blue: oklch(0.63 0.105 248);
  --plum: oklch(0.56 0.13 330);
  --leaf: oklch(0.64 0.105 155);
  --coral: oklch(0.64 0.13 35);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;

  --ease-spring: cubic-bezier(.34,1.4,.4,1);
  --shadow-pop: 0 24px 60px -18px oklch(0.2 0.05 310 / .35), 0 4px 14px -6px oklch(0.2 0.05 310 / .22);
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: oklch(0.965 0.01 95);
  --ink: oklch(0.26 0.035 310);
  --ink-soft: oklch(0.45 0.03 310);
  --ink-faint: oklch(0.60 0.02 310);
  --hairline: oklch(0.3 0.03 310 / 0.10);
  --hairline-strong: oklch(0.3 0.03 310 / 0.18);

  --glass: oklch(0.99 0.005 95 / 0.62);
  --glass-strong: oklch(0.99 0.005 95 / 0.84);
  --glass-input: oklch(1 0 0 / 0.55);
  --panel: oklch(0.99 0.004 95 / 0.92);
  --hover: oklch(0.3 0.04 310 / 0.05);
  --active: oklch(0.3 0.04 310 / 0.09);

  --accent: oklch(0.56 0.13 330);
  --accent-ink: white;
  --accent-soft: oklch(0.56 0.13 330 / 0.10);
  --blue-soft: oklch(0.63 0.105 248 / 0.12);
  --gold-soft: oklch(0.87 0.155 96 / 0.22);
  --leaf-soft: oklch(0.64 0.105 155 / 0.13);
  --coral-soft: oklch(0.64 0.13 35 / 0.12);

  --shadow-card: 0 10px 30px -14px oklch(0.3 0.05 310 / .18), 0 2px 6px -2px oklch(0.3 0.05 310 / .08);
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(0.185 0.028 305);
  --ink: oklch(0.94 0.012 95);
  --ink-soft: oklch(0.76 0.02 310);
  --ink-faint: oklch(0.60 0.025 310);
  --hairline: oklch(0.95 0.01 95 / 0.09);
  --hairline-strong: oklch(0.95 0.01 95 / 0.17);

  --glass: oklch(0.25 0.03 305 / 0.52);
  --glass-strong: oklch(0.24 0.03 305 / 0.78);
  --glass-input: oklch(0.3 0.03 305 / 0.5);
  --panel: oklch(0.235 0.03 305 / 0.92);
  --hover: oklch(0.95 0.02 95 / 0.06);
  --active: oklch(0.95 0.02 95 / 0.11);

  --accent: oklch(0.74 0.12 330);
  --accent-ink: oklch(0.18 0.04 330);
  --accent-soft: oklch(0.74 0.12 330 / 0.14);
  --blue-soft: oklch(0.7 0.1 248 / 0.16);
  --gold-soft: oklch(0.87 0.155 96 / 0.13);
  --leaf-soft: oklch(0.7 0.1 155 / 0.15);
  --coral-soft: oklch(0.7 0.12 35 / 0.16);

  --shadow-card: 0 14px 36px -16px oklch(0.05 0.02 305 / .6), 0 2px 8px -2px oklch(0.05 0.02 305 / .4);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: color .4s ease;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
::selection { background: oklch(0.87 0.155 96 / 0.45); }

#mesh-bg {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block;
}

/* glass panels */
.glass {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(1.5);
  border: 1px solid var(--hairline);
}
.glass-strong {
  background: var(--glass-strong);
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(1.6);
  border: 1px solid var(--hairline);
}

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* shared utility */
.mono { font-family: var(--font-mono); }
.t-soft { color: var(--ink-soft); }
.t-faint { color: var(--ink-faint); }

@keyframes trellis-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes trellis-pop {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}