/* ThaiCards / LyricLens — Night Studio design tokens.
   Ported from Claude Design handoff 2026-05-11. */

:root {
  /* Surface stack */
  --bg:            oklch(0.165 0.012 248);
  --bg-elev-0:     oklch(0.190 0.013 248);
  --bg-elev-1:     oklch(0.215 0.014 248);
  --bg-elev-2:     oklch(0.245 0.015 248);
  --bg-input:      oklch(0.205 0.012 248);

  /* Hairlines */
  --line:          oklch(0.30 0.013 248 / 0.6);
  --line-soft:     oklch(0.30 0.013 248 / 0.35);
  --line-strong:   oklch(0.42 0.018 248 / 0.7);

  /* Text */
  --text:          oklch(0.965 0.008 248);
  --text-2:        oklch(0.78 0.012 248);
  --text-3:        oklch(0.60 0.014 248);
  --text-dim:      oklch(0.46 0.014 248);

  /* Primary — jade teal */
  --accent:        oklch(0.78 0.115 180);
  --accent-hi:     oklch(0.85 0.105 180);
  --accent-lo:     oklch(0.66 0.115 180);
  --accent-ink:    oklch(0.22 0.04 200);
  --accent-glow:   oklch(0.78 0.115 180 / 0.18);
  --accent-tint:   oklch(0.78 0.115 180 / 0.08);

  /* Warm secondary */
  --warm:          oklch(0.83 0.095 78);
  --warm-hi:       oklch(0.88 0.085 78);
  --warm-tint:     oklch(0.83 0.095 78 / 0.12);
  --warm-ink:      oklch(0.30 0.05 70);

  /* LyricLens blue */
  --ll:            oklch(0.78 0.10 230);
  --ll-tint:       oklch(0.78 0.10 230 / 0.12);

  /* Status */
  --ok:            oklch(0.78 0.13 155);
  --warn:          oklch(0.80 0.13 78);
  --err:           oklch(0.72 0.18 22);
  --info:          oklch(0.78 0.10 230);

  /* Radii */
  --r-xs:          4px;
  --r-sm:          6px;
  --r-md:          10px;
  --r-lg:          14px;
  --r-xl:          20px;
  --r-2xl:         28px;
  --r-pill:        999px;

  /* Shadows */
  --sh-1: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 1px 2px oklch(0 0 0 / 0.4);
  --sh-2: 0 1px 0 oklch(1 0 0 / 0.05) inset, 0 4px 16px oklch(0 0 0 / 0.4);
  --sh-3: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 16px 40px oklch(0 0 0 / 0.55);
  --sh-glow: 0 0 0 1px var(--accent), 0 0 24px var(--accent-glow);

  /* Type */
  --font-display:  "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body:     "Inter", system-ui, sans-serif;
  --font-thai:     "Noto Sans Thai Looped", "Noto Sans Thai", sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Density */
  --pad-1:         8px;
  --pad-2:         12px;
  --pad-3:         16px;
  --pad-4:         24px;
  --pad-5:         32px;
}

/* App scope — only inside .tc-app to avoid colliding with legacy style.css */
.tc-app, .tc-app * { box-sizing: border-box; }
.tc-app {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
.tc-app .thai { font-family: var(--font-thai); }
.tc-app .kbd  { font-family: var(--font-mono); }

.tc-app h1, .tc-app h2, .tc-app h3, .tc-app h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
}
.tc-app p { margin: 0; }
.tc-app button { font-family: inherit; }
.tc-app a { color: inherit; text-decoration: none; }
.tc-app input, .tc-app textarea, .tc-app select { font-family: inherit; }

/* Soft radial vignette */
.tc-bg {
  background:
    radial-gradient(80% 60% at 50% 0%, oklch(0.78 0.115 180 / 0.05), transparent 60%),
    radial-gradient(60% 50% at 100% 100%, oklch(0.83 0.095 78 / 0.025), transparent 60%),
    var(--bg);
}

/* Scrollbars */
.tc-app *::-webkit-scrollbar { width: 8px; height: 8px; }
.tc-app *::-webkit-scrollbar-track { background: transparent; }
.tc-app *::-webkit-scrollbar-thumb {
  background: oklch(0.42 0.018 248 / 0.5);
  border-radius: 4px;
}
.tc-app *::-webkit-scrollbar-thumb:hover { background: oklch(0.5 0.018 248 / 0.7); }

/* Focus ring */
.tc-app *:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Selection */
.tc-app ::selection { background: var(--accent); color: var(--accent-ink); }

/* Utility */
.tc-mono { font-family: var(--font-mono); font-feature-settings: "ss01", "calt"; }
.tc-tab  { font-variant-numeric: tabular-nums; }
.tc-thai { font-family: var(--font-thai); }

@keyframes tcFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}