/* ok.ssgoo.net shared theme — inspired by getdesign.md Vercel DESIGN.md
   Light (default): near-white canvas, black ink, Geist-like system stack
   Dark: ink canvas, soft white type
*/
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-soft-2: #f5f5f5;
  --bg-elevated: #ffffff;
  --ink: #171717;
  --body: #4d4d4d;
  --mute: #888888;
  --faint: #a1a1a1;
  --hairline: #ebebeb;
  --hairline-strong: #e0e0e0;
  --link: #0070f3;
  --link-hover: #0761d1;
  --link-soft: #d3e5ff;
  --primary: #171717;
  --on-primary: #ffffff;
  --success: #0070f3;
  --success-soft: #e8f3ff;
  --ok: #0a7a36;
  --ok-soft: #e8f8ee;
  --ok-border: #b7ebc9;
  --warn: #ab570a;
  --warn-soft: #ffefcf;
  --warn-border: #f5d48a;
  --error: #ee0000;
  --error-soft: #f7d4d6;
  --error-border: #f5b5b8;
  --violet: #7928ca;
  --violet-soft: #f3e8ff;
  --cyan: #0d9488;
  --cyan-soft: #ccfbf1;
  --card-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  --card-shadow-hover: 0 2px 8px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08);
  --header-bg: rgba(255,255,255,.85);
  --code-bg: #f5f5f5;
  --code-fg: #171717;
  --chip-up-bg: #e8f8ee;
  --chip-up-fg: #0a7a36;
  --chip-up-bd: #b7ebc9;
  --chip-down-bg: #f7d4d6;
  --chip-down-fg: #c50000;
  --chip-down-bd: #f5b5b8;
  --bar-track: #f0f0f0;
  --grad-mesh:
    radial-gradient(900px 420px at 0% -10%, rgba(0,124,240,.10), transparent 55%),
    radial-gradient(800px 400px at 100% 0%, rgba(121,40,202,.08), transparent 50%),
    radial-gradient(700px 360px at 50% 100%, rgba(0,223,216,.06), transparent 50%);
  --toast-bg: #171717;
  --toast-fg: #fafafa;
  --selection-bg: #171717;
  --selection-fg: #f2f2f2;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a;
  --bg-soft: #111111;
  --bg-soft-2: #171717;
  --bg-elevated: #141414;
  --ink: #ededed;
  --body: #a1a1a1;
  --mute: #888888;
  --faint: #666666;
  --hairline: #262626;
  --hairline-strong: #333333;
  --link: #3291ff;
  --link-hover: #52a8ff;
  --link-soft: #0b1f3a;
  --primary: #ededed;
  --on-primary: #0a0a0a;
  --success: #3291ff;
  --success-soft: #0b1f3a;
  --ok: #4ade80;
  --ok-soft: #052e16;
  --ok-border: #14532d;
  --warn: #fbbf24;
  --warn-soft: #27170a;
  --warn-border: #854d0e;
  --error: #ff6666;
  --error-soft: #2a0a0a;
  --error-border: #7f1d1d;
  --violet: #c4b5fd;
  --violet-soft: #1e1033;
  --cyan: #50e3c2;
  --cyan-soft: #042f2e;
  --card-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.35);
  --card-shadow-hover: 0 1px 0 rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.45);
  --header-bg: rgba(10,10,10,.85);
  --code-bg: #171717;
  --code-fg: #e5e5e5;
  --chip-up-bg: #052e16;
  --chip-up-fg: #86efac;
  --chip-up-bd: #14532d;
  --chip-down-bg: #2a0a0a;
  --chip-down-fg: #fca5a5;
  --chip-down-bd: #7f1d1d;
  --bar-track: #1f1f1f;
  --grad-mesh:
    radial-gradient(900px 420px at 0% -10%, rgba(0,124,240,.14), transparent 55%),
    radial-gradient(800px 400px at 100% 0%, rgba(121,40,202,.12), transparent 50%),
    radial-gradient(700px 360px at 50% 100%, rgba(0,223,216,.08), transparent 50%);
  --toast-bg: #ededed;
  --toast-fg: #0a0a0a;
  --selection-bg: #ededed;
  --selection-fg: #0a0a0a;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

html, body {
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: "Geist", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  background-image: var(--grad-mesh);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

code, .mono {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border-radius: 9999px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  background: var(--bg-soft);
  border-color: var(--hairline-strong);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
  width: 16px;
  height: 16px;
}
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.theme-toggle .label { font-size: 12px; color: var(--mute); }

/* Shared toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  background: var(--toast-bg);
  color: var(--toast-fg);
  padding: 10px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  z-index: 50;
  box-shadow: var(--card-shadow-hover);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}