/* KlipX base: tokens, reset, shared components. Used by the site and the app. */
:root {
  --ink: #0d0d12;
  --ink-2: #363844;
  --muted: #5f6577;     /* 5.9:1 on white */
  --faint: #8a8f9e;     /* only for non-essential meta text */
  --line: #e4e5ea;
  --line-2: #d3d5dc;
  --soft: #f5f6f8;
  --white: #ffffff;
  --accent: #83fd80;
  --accent-tint: #dcfadb;
  --ok: #16a34a;
  --warn: #b45309;
  --danger: #c2410c;

  /* 4px spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 24px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-optical-sizing: auto; color: var(--ink); background: var(--white); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
img, svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 100; background: var(--ink); color: var(--white); padding: var(--s2) var(--s4); border-radius: var(--r1); }
.skip:focus { top: var(--s4); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 40px; padding: 0 var(--s4); border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s; }
.btn--sm { height: 32px; padding: 0 var(--s3); font-size: 14px; }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: #2a2c38; }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: #e9eaee; }
.btn--line { background: var(--white); border-color: var(--line-2); }
.btn--line:hover { border-color: var(--ink); }
.btn--plain { padding: 0 var(--s2); }
.btn--plain:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: grid; gap: var(--s2); }
.field > span { font-size: 14px; font-weight: 500; }
.field small { font-size: 13px; color: var(--muted); }
.input, .select, .textarea { width: 100%; height: 40px; padding: 0 var(--s3); border: 1px solid var(--line-2); border-radius: var(--r1); background: var(--white); font-size: 15px; transition: border-color .15s; }
.textarea { height: auto; min-height: 88px; padding: var(--s3); resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--faint); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); border-radius: var(--r1); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.logo svg { width: 18px; height: 18px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}