/* Keystone — design tokens
   Stone-mason inspired: limestone surfaces, charcoal ink, sienna accent.
   Both light + dark. */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;

  /* LIGHT — "Limestone" */
  --bg:        #F2EEE6;        /* canvas behind app */
  --surface:   #FBF8F2;        /* card / panel */
  --surface-2: #F6F1E7;        /* sunken / sidebar */
  --surface-3: #ECE5D6;        /* hover row */
  --line:      #E2DAC8;
  --line-2:    #D2C8B1;
  --ink:       #1B1916;        /* primary text */
  --ink-2:     #5A544A;        /* secondary */
  --ink-3:     #8A8478;        /* tertiary / placeholder */
  --accent:    #A85D2F;        /* sienna — Jersey granite */
  --accent-2:  #8C4A22;        /* deeper */
  --accent-soft:#F1DDC9;       /* tint bg */
  --ok:        #4A7C3A;
  --ok-soft:   #DCE8CE;
  --warn:      #B07A14;
  --warn-soft: #F2E2BC;
  --danger:    #A6321F;
  --danger-soft:#F1D2C9;
  --info:      #3B6BA6;
  --info-soft: #D6E0EF;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 0 rgba(27,25,22,0.04), 0 1px 2px rgba(27,25,22,0.05);
  --shadow:    0 1px 0 rgba(27,25,22,0.04), 0 4px 12px rgba(27,25,22,0.06);
  --shadow-lg: 0 12px 32px rgba(27,25,22,0.10);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
}

[data-theme="dark"] {
  /* DARK — "Slate" */
  --bg:        #131316;
  --surface:   #1B1C20;
  --surface-2: #17181B;
  --surface-3: #25272C;
  --line:      #2A2C32;
  --line-2:    #3A3C43;
  --ink:       #ECE6D8;
  --ink-2:     #A6A095;
  --ink-3:     #6F6A60;
  --accent:    #D88556;
  --accent-2:  #BE6E40;
  --accent-soft:#3A2418;
  --ok:        #7FB565;
  --ok-soft:   #1F2C18;
  --warn:      #D9A23A;
  --warn-soft: #2E2410;
  --danger:    #D9614A;
  --danger-soft:#311612;
  --info:      #6F9FD8;
  --info-soft: #142133;

  --shadow-sm: 0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow:    0 1px 0 rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
}

.app {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* Native-feel desktop widgets */
.app input[type="text"],
.app input[type="number"],
.app input[type="date"],
.app textarea,
.app select {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  outline: none;
  width: 100%;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.app input:focus, .app textarea:focus, .app select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.app input::placeholder, .app textarea::placeholder { color: var(--ink-3); }

.app .btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .04s;
  white-space: nowrap;
}
.app .btn:hover { background: var(--surface-3); }
.app .btn:active { transform: translateY(1px); }
.app .btn-primary {
  background: var(--accent); color: #FBF8F2;
  border-color: var(--accent-2);
}
.app .btn-primary:hover { background: var(--accent-2); }
.app .btn-ghost { background: transparent; border-color: transparent; }
.app .btn-ghost:hover { background: var(--surface-3); }
.app .btn-sm { padding: 4px 8px; font-size: 12px; }

.app .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  background: var(--surface-3); color: var(--ink-2);
  border: 1px solid var(--line);
}
.app .chip.ok      { background: var(--ok-soft);    color: var(--ok);     border-color: color-mix(in oklab, var(--ok) 25%, transparent); }
.app .chip.warn    { background: var(--warn-soft);  color: var(--warn);   border-color: color-mix(in oklab, var(--warn) 25%, transparent); }
.app .chip.danger  { background: var(--danger-soft);color: var(--danger); border-color: color-mix(in oklab, var(--danger) 25%, transparent); }
.app .chip.accent  { background: var(--accent-soft);color: var(--accent-2);border-color: color-mix(in oklab, var(--accent) 25%, transparent); }
.app .chip.info    { background: var(--info-soft);  color: var(--info);   border-color: color-mix(in oklab, var(--info) 25%, transparent); }

/* Status dot */
.app .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.app .dot.ok { background: var(--ok); }
.app .dot.warn { background: var(--warn); }
.app .dot.danger { background: var(--danger); }

/* Section label (stone-masonry small caps detail) */
.app .eyebrow {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}

/* Card */
.app .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Subtle limestone grain — built from CSS, not an asset */
.limestone-grain {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(168,93,47,0.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(27,25,22,0.04) 0, transparent 45%);
}
[data-theme="dark"] .limestone-grain {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(216,133,86,0.06) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.02) 0, transparent 45%);
}

/* Form rows */
.app .field { display: flex; flex-direction: column; gap: 6px; }
.app .field label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.app .field .hint { font-size: 11px; color: var(--ink-3); }

.app .divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Table */
.app table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
.app table.t thead th {
  text-align: left; font-weight: 500; color: var(--ink-3);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  position: sticky; top: 0; z-index: 1;
}
.app table.t tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.app table.t tbody tr:hover { background: var(--surface-3); }
.app table.t tbody tr:last-child td { border-bottom: 0; }

/* Scrollbars (kept native-ish but tinted) */
.app ::-webkit-scrollbar { width: 10px; height: 10px; }
.app ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.app ::-webkit-scrollbar-track { background: transparent; }