/* ============================================================
   咔嗒Lab · Kada Lab — shared theme tokens + neumorphism system
   Light/dark driven by [data-theme]; accent + soft via inline vars.
   ============================================================ */

:root {
  --font-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* page root --------------------------------------------------- */
.kada {
  --accent: #2f6df0;            /* overridden inline by tweak */
  --soft: 1;                    /* shadow intensity multiplier */
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}
.kada *, .kada *::before, .kada *::after { box-sizing: border-box; }

/* ---- LIGHT (classic neumorphism cool-gray) ---- */
.kada[data-theme="light"] {
  --bg:        #e4e7ee;
  --bg-sink:   #dce0e9;
  --bg-rise:   #eef1f7;
  --ink:       #262b36;
  --ink-soft:  #545c6b;
  --ink-faint: #8b93a4;
  --hair:      rgba(38,43,54,0.08);
  --d-sh: rgba(163,174,196,0.62);   /* dark shadow  */
  --l-sh: rgba(255,255,255,0.95);   /* light shadow */
  --accent-ink: #fff;
  --accent-glow: color-mix(in oklch, var(--accent) 22%, transparent);
  --accent-tint: color-mix(in oklch, var(--accent) 12%, var(--bg));
  color: var(--ink);
  background: var(--bg);
}

/* ---- DARK (deep cool tech) ---- */
.kada[data-theme="dark"] {
  --bg:        #21242c;
  --bg-sink:   #1c1f26;
  --bg-rise:   #272b34;
  --ink:       #e7eaf1;
  --ink-soft:  #aab2c2;
  --ink-faint: #6f7888;
  --hair:      rgba(255,255,255,0.07);
  --d-sh: rgba(0,0,0,0.55);
  --l-sh: rgba(255,255,255,0.045);
  --accent-ink: #0b1220;
  --accent-glow: color-mix(in oklch, var(--accent) 36%, transparent);
  --accent-tint: color-mix(in oklch, var(--accent) 16%, var(--bg));
  color: var(--ink);
  background: var(--bg);
}

/* ============================================================
   Neumorphism utilities — offsets scale with --soft
   ============================================================ */
.nm-rise {
  background: var(--bg);
  box-shadow:
    calc(7px * var(--soft)) calc(7px * var(--soft)) calc(16px * var(--soft)) var(--d-sh),
    calc(-7px * var(--soft)) calc(-7px * var(--soft)) calc(16px * var(--soft)) var(--l-sh);
}
.nm-rise-sm {
  background: var(--bg);
  box-shadow:
    calc(4px * var(--soft)) calc(4px * var(--soft)) calc(9px * var(--soft)) var(--d-sh),
    calc(-4px * var(--soft)) calc(-4px * var(--soft)) calc(9px * var(--soft)) var(--l-sh);
}
.nm-sink {
  background: var(--bg);
  box-shadow:
    inset calc(5px * var(--soft)) calc(5px * var(--soft)) calc(11px * var(--soft)) var(--d-sh),
    inset calc(-5px * var(--soft)) calc(-5px * var(--soft)) calc(11px * var(--soft)) var(--l-sh);
}
.nm-sink-sm {
  background: var(--bg);
  box-shadow:
    inset calc(3px * var(--soft)) calc(3px * var(--soft)) calc(7px * var(--soft)) var(--d-sh),
    inset calc(-3px * var(--soft)) calc(-3px * var(--soft)) calc(7px * var(--soft)) var(--l-sh);
}
/* interactive rise that presses on hover/active */
.nm-press { transition: box-shadow .28s cubic-bezier(.2,.7,.3,1), transform .28s cubic-bezier(.2,.7,.3,1); }
.nm-press:hover { transform: translateY(-2px); }
.nm-press:active { transform: translateY(0); }

/* ============================================================
   Shared atoms
   ============================================================ */
.kada-logo { display: block; width: auto; user-select: none; }
.kada[data-theme="light"] .logo-dark { display: block; }
.kada[data-theme="light"] .logo-light { display: none; }
.kada[data-theme="dark"]  .logo-dark { display: none; }
.kada[data-theme="dark"]  .logo-light { display: block; }

.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* pill button */
.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 14px 26px;
  color: var(--ink);
  background: var(--bg);
  transition: box-shadow .28s cubic-bezier(.2,.7,.3,1), transform .2s, color .2s;
  box-shadow:
    calc(5px * var(--soft)) calc(5px * var(--soft)) calc(11px * var(--soft)) var(--d-sh),
    calc(-5px * var(--soft)) calc(-5px * var(--soft)) calc(11px * var(--soft)) var(--l-sh);
}
.btn:hover { transform: translateY(-2px); }
.btn:active {
  transform: translateY(0);
  box-shadow:
    inset calc(4px * var(--soft)) calc(4px * var(--soft)) calc(8px * var(--soft)) var(--d-sh),
    inset calc(-4px * var(--soft)) calc(-4px * var(--soft)) calc(8px * var(--soft)) var(--l-sh);
}
.btn-accent {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow:
    calc(5px * var(--soft)) calc(5px * var(--soft)) calc(14px * var(--soft)) var(--accent-glow),
    calc(-3px * var(--soft)) calc(-3px * var(--soft)) calc(10px * var(--soft)) var(--l-sh);
}
.btn-accent:active {
  box-shadow:
    inset calc(4px * var(--soft)) calc(4px * var(--soft)) calc(8px * var(--soft)) rgba(0,0,0,.25);
}

/* dot / arrow */
.arrow-dot {
  width: 38px; height: 38px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  color: var(--ink-soft);
  transition: color .25s, box-shadow .28s, transform .28s;
}
.arrow-dot svg { width: 15px; height: 15px; }

/* theme toggle */
.theme-toggle {
  width: 44px; height: 44px; border-radius: 999px;
  border: none; cursor: pointer; color: var(--ink-soft);
  background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: box-shadow .28s, color .25s, transform .2s;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle svg { width: 19px; height: 19px; }

/* tag chip */
.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.chip-accent { color: var(--accent); }
.chip-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* simple geometric module glyph (no illustration) */
.glyph { position: relative; }
.glyph i { position: absolute; display: block; }

/* live status pulse */
.pulse {
  width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: kpulse 2.2s infinite;
}
@keyframes kpulse {
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.kada a { color: inherit; text-decoration: none; }