/* Lakban design tokens — warm paper + clay accent, dark mode first-class */

:root {
  /* Type */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Accent (clay — nods to "tape") */
  --accent-h: 38;
  --accent: oklch(0.64 0.14 var(--accent-h));
  --accent-hover: oklch(0.58 0.15 var(--accent-h));
  --accent-soft: oklch(0.94 0.04 var(--accent-h));
  --accent-fg: #fff;
  --accent-ring: oklch(0.64 0.14 var(--accent-h) / 0.28);

  /* Neutrals — warm paper */
  --bg: oklch(0.985 0.004 80);
  --bg-raised: oklch(1 0 0);
  --bg-sunken: oklch(0.965 0.006 80);
  --bg-hover: oklch(0.955 0.008 80);
  --surface-1: oklch(1 0 0);
  --surface-2: oklch(0.975 0.005 80);

  --line: oklch(0.91 0.008 80);
  --line-strong: oklch(0.86 0.01 80);

  --ink: oklch(0.22 0.01 80);
  --ink-2: oklch(0.38 0.01 80);
  --ink-3: oklch(0.55 0.008 80);
  --ink-4: oklch(0.72 0.008 80);

  /* Status (same L/C family so they sit together) */
  --s-inquiry:  oklch(0.66 0.11 230);
  --s-active:   oklch(0.70 0.12 200);
  --s-attn:     oklch(0.73 0.14 68);
  --s-unpaid:   oklch(0.78 0.14 95);
  --s-invoiced: oklch(0.74 0.15 130);
  --s-won:      oklch(0.66 0.14 150);
  --s-loss:     oklch(0.62 0.16 25);

  --s-inquiry-soft:  oklch(0.95 0.02 230);
  --s-active-soft:   oklch(0.95 0.03 200);
  --s-attn-soft:     oklch(0.95 0.04 68);
  --s-unpaid-soft:   oklch(0.96 0.05 95);
  --s-invoiced-soft: oklch(0.95 0.04 130);
  --s-won-soft:      oklch(0.94 0.04 150);
  --s-loss-soft:     oklch(0.95 0.03 25);

  /* Heatmap */
  --heat-0: oklch(0.94 0.005 80);
  --heat-1: oklch(0.86 0.09 145);
  --heat-2: oklch(0.80 0.14 85);
  --heat-3: oklch(0.66 0.16 30);
  --heat-4: oklch(0.40 0.10 25);

  /* Shadow */
  --shadow-1: 0 1px 0 oklch(0.90 0.01 80 / 0.5), 0 1px 3px oklch(0.20 0.01 80 / 0.04);
  --shadow-2: 0 1px 0 oklch(0.90 0.01 80 / 0.5), 0 4px 12px oklch(0.20 0.01 80 / 0.06);
  --shadow-pop: 0 12px 40px oklch(0.20 0.01 80 / 0.12), 0 2px 8px oklch(0.20 0.01 80 / 0.06);

  /* Radius */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Density */
  --pad-x: 16px;
  --pad-y: 14px;
  --row-h: 40px;
}

html.dark {
  /* Dark mode — warm-tinted, not dead grey. First-class. */
  --bg: oklch(0.16 0.006 75);
  --bg-raised: oklch(0.21 0.008 75);
  --bg-sunken: oklch(0.13 0.005 75);
  --bg-hover: oklch(0.24 0.01 75);
  --surface-1: oklch(0.20 0.008 75);
  --surface-2: oklch(0.235 0.009 75);

  --line: oklch(0.28 0.008 75);
  --line-strong: oklch(0.34 0.01 75);

  --ink: oklch(0.96 0.005 80);
  --ink-2: oklch(0.82 0.008 80);
  --ink-3: oklch(0.64 0.008 80);
  --ink-4: oklch(0.48 0.008 80);

  --accent: oklch(0.72 0.14 var(--accent-h));
  --accent-hover: oklch(0.78 0.15 var(--accent-h));
  --accent-soft: oklch(0.30 0.06 var(--accent-h));
  --accent-fg: oklch(0.15 0.01 75);
  --accent-ring: oklch(0.72 0.14 var(--accent-h) / 0.32);

  --s-inquiry:  oklch(0.70 0.11 230);
  --s-active:   oklch(0.74 0.12 200);
  --s-attn:     oklch(0.78 0.14 68);
  --s-unpaid:   oklch(0.82 0.14 95);
  --s-invoiced: oklch(0.78 0.15 130);
  --s-won:      oklch(0.72 0.14 150);
  --s-loss:     oklch(0.68 0.16 25);

  --s-inquiry-soft:  oklch(0.28 0.04 230);
  --s-active-soft:   oklch(0.28 0.05 200);
  --s-attn-soft:     oklch(0.30 0.06 68);
  --s-unpaid-soft:   oklch(0.30 0.07 95);
  --s-invoiced-soft: oklch(0.28 0.06 130);
  --s-won-soft:      oklch(0.28 0.06 150);
  --s-loss-soft:     oklch(0.28 0.05 25);

  --heat-0: oklch(0.24 0.008 75);
  --heat-1: oklch(0.45 0.10 145);
  --heat-2: oklch(0.62 0.14 85);
  --heat-3: oklch(0.60 0.16 30);
  --heat-4: oklch(0.45 0.12 25);

  --shadow-1: 0 1px 0 oklch(0.10 0.01 80 / 0.5), 0 1px 3px oklch(0.00 0 0 / 0.2);
  --shadow-2: 0 1px 0 oklch(0.10 0.01 80 / 0.5), 0 4px 12px oklch(0.00 0 0 / 0.25);
  --shadow-pop: 0 16px 50px oklch(0.00 0 0 / 0.5), 0 2px 8px oklch(0.00 0 0 / 0.3);
}

/* Density modes */
html[data-density="compact"] {
  --pad-x: 12px;
  --pad-y: 10px;
  --row-h: 32px;
}
html[data-density="comfortable"] {
  --pad-x: 20px;
  --pad-y: 18px;
  --row-h: 48px;
}

/* Base reset scoped to .lkb */
.lkb, .lkb * { box-sizing: border-box; }
.lkb {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
.lkb .mono, .lkb code { font-family: var(--font-mono); font-feature-settings: "zero"; }

/* Shared primitives */
.lkb-surface { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lkb-surface-2 { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lkb-hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Buttons */
.lkb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  font: 500 13px/1 var(--font-sans);
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  color: var(--ink);
  cursor: pointer; transition: background .12s, border-color .12s, transform .08s;
  white-space: nowrap;
}
.lkb-btn:hover { background: var(--bg-hover); }
.lkb-btn:active { transform: translateY(0.5px); }
.lkb-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.lkb-btn.primary:hover { background: var(--accent-hover); }
.lkb-btn.ghost { border-color: transparent; background: transparent; }
.lkb-btn.ghost:hover { background: var(--bg-hover); }
.lkb-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.lkb-btn.icon { width: 30px; padding: 0; justify-content: center; }

/* Inputs */
.lkb-input {
  height: 34px; padding: 0 10px;
  font: 400 13px/1 var(--font-sans);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--ink);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.lkb-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* Pill/badge */
.lkb-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px;
  font: 500 11px/1 var(--font-sans);
  border-radius: 100px;
  letter-spacing: 0.01em;
}
.lkb-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }

/* Numeric */
.lkb .num { font-family: var(--font-mono); font-feature-settings: "zero","tnum"; font-variant-numeric: tabular-nums; }

/* Chrome scrollbars — subtle */
.lkb ::-webkit-scrollbar { width: 10px; height: 10px; }
.lkb ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
.lkb ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: padding-box; border: 2px solid transparent; }

/* Focus ring */
.lkb-ring:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

/* Subtle texture hint — paper grain, almost invisible */
.lkb-paper {
  background-image:
    radial-gradient(oklch(0.5 0.01 80 / 0.025) 1px, transparent 1px);
  background-size: 3px 3px;
}
html.dark .lkb-paper {
  background-image:
    radial-gradient(oklch(0.9 0.01 80 / 0.02) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* Placeholder strip pattern */
.lkb-ph {
  background: repeating-linear-gradient(
    135deg,
    var(--bg-sunken) 0, var(--bg-sunken) 8px,
    var(--bg-hover) 8px, var(--bg-hover) 16px
  );
  color: var(--ink-3);
  font: 500 11px/1.2 var(--font-mono);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px;
  border-radius: var(--r-md);
}

/* Utility */
.lkb-grow { flex: 1; min-width: 0; }
.lkb-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }