/* ============================================================
   Timely — Hi-Fi Brand Tokens
   Locked direction: Clay & Ink
   ============================================================ */

:root {
  /* ── Brand ── */
  --brand-hero:        #C45A3A;
  --brand-hero-deep:   #9C4128;
  --brand-hero-soft:   #F2DDD3;
  --brand-hero-tint:   #FBEDE5;

  /* ── Ink scale ── */
  --ink-1000: #1F1A17;   /* primary text, brand ink */
  --ink-800:  #3D332D;   /* body */
  --ink-600:  #6B5E54;   /* secondary */
  --ink-500:  #8A7B70;   /* muted / placeholder */
  --ink-400:  #B5A89D;   /* faint */
  --ink-300:  #D4C9BE;   /* hairline emphasis */
  --ink-200:  #E5DBD2;   /* borders */
  --ink-100:  #EFE7DD;   /* dividers */
  --ink-50:   #F7F1E9;   /* subtle fill */
  --ink-25:   #FBF7F2;   /* paper */

  /* ── Surfaces ── */
  --paper:    #FBF7F2;
  --surface:  #FFFFFF;
  --canvas:   #F7F1E9;
  --overlay:  rgba(31, 26, 23, 0.6);

  /* ── Semantic ── */
  --success:  #3D7A4E;
  --success-soft: #DCEBDF;
  --warning:  #C99B2C;
  --warning-soft: #F4E5C0;
  --danger:   #A8254E;
  --danger-soft:  #F4DCE3;
  --info:     #2C5764;
  --info-soft: #D7E4E8;

  /* ── Type ── */
  --font-sans: 'DM Sans', 'Söhne', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'DM Mono', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --font-display: 'DM Sans', system-ui, sans-serif;

  /* Type scale */
  --t-display-lg: 40px;
  --t-display:    32px;
  --t-h1:         24px;
  --t-h2:         18px;
  --t-h3:         15px;
  --t-body:       14px;
  --t-small:      13px;
  --t-tiny:       12px;
  --t-micro:      11px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-mega:   0.08em;

  /* ── Spacing (4px base) ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 56px; --s-11: 64px; --s-12: 80px;

  /* ── Radius ── */
  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 12px; --r-5: 16px; --r-pill: 999px;

  /* ── Shadows ── */
  --shadow-1: 0 1px 2px rgba(31,26,23,0.06), 0 0 0 1px rgba(31,26,23,0.04);
  --shadow-2: 0 2px 6px rgba(31,26,23,0.08), 0 0 0 1px rgba(31,26,23,0.04);
  --shadow-3: 0 4px 16px rgba(31,26,23,0.10), 0 0 0 1px rgba(31,26,23,0.04);
  --shadow-4: 0 12px 36px rgba(31,26,23,0.16), 0 0 0 1px rgba(31,26,23,0.04);
  --shadow-brand: 0 6px 20px rgba(196,90,58,0.28);

  /* ── Motion ── */
  --easing-soft: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-quick: 120ms;
  --dur-base:  180ms;
  --dur-slow:  280ms;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--ink-1000);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ── Atoms ── */

/* Button — primary */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-2);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.01em;
  background: var(--surface);
  color: var(--ink-1000);
  border: 1px solid var(--ink-200);
  transition: all var(--dur-quick) var(--easing-soft);
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink-300); background: var(--ink-25); }
.btn:active { transform: translateY(0.5px); }

.btn.primary {
  background: var(--brand-hero);
  color: #fff;
  border-color: var(--brand-hero);
  font-weight: 600;
}
.btn.primary:hover { background: var(--brand-hero-deep); border-color: var(--brand-hero-deep); }
.btn.primary.shadow { box-shadow: var(--shadow-brand); }

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-600);
}
.btn.ghost:hover { background: var(--ink-50); color: var(--ink-1000); }

.btn.sm { height: 28px; padding: 0 var(--s-3); font-size: var(--t-tiny); }
.btn.lg { height: 44px; padding: 0 var(--s-5); font-size: var(--t-h3); }
.btn.icon { width: 32px; padding: 0; justify-content: center; }

/* Pill / badge */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 500;
  background: var(--ink-50);
  color: var(--ink-800);
  letter-spacing: 0;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-500); }
.pill.live { background: var(--success-soft); color: var(--success); }
.pill.live .dot { background: var(--success); animation: live-pulse 1.6s ease-in-out infinite; }
.pill.brand { background: var(--brand-hero-soft); color: var(--brand-hero-deep); }
.pill.brand .dot { background: var(--brand-hero); }
.pill.warn { background: var(--warning-soft); color: #8A6712; }
.pill.warn .dot { background: var(--warning); }
.pill.draft { background: var(--ink-50); color: var(--ink-600); border: 1px dashed var(--ink-300); }
.pill.muted { background: transparent; color: var(--ink-500); border: 1px solid var(--ink-200); }

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61,122,78,0.4); }
  50% { box-shadow: 0 0 0 4px rgba(61,122,78,0); }
}

/* Input */
.input {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 var(--s-3);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-2);
  font-size: var(--t-small);
  color: var(--ink-1000);
  transition: border-color var(--dur-quick), box-shadow var(--dur-quick);
}
.input:hover { border-color: var(--ink-300); }
.input:focus-within { border-color: var(--brand-hero); box-shadow: 0 0 0 3px var(--brand-hero-tint); outline: none; }
.input input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; padding: 0; }
.input input::placeholder { color: var(--ink-500); }
.input.muted { color: var(--ink-500); }
.input .leader { color: var(--ink-500); flex-shrink: 0; }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-1);
}
.card.flat { box-shadow: none; }
.card.elevated { box-shadow: var(--shadow-2); }

/* Table */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.tbl th {
  text-align: left;
  font-weight: 500;
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-500);
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--ink-100);
  background: var(--ink-25);
  white-space: nowrap;
}
.tbl td {
  padding: 12px var(--s-4);
  border-bottom: 1px solid var(--ink-100);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: var(--ink-25); }
.tbl .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.tbl .muted { color: var(--ink-500); }
.tbl .right { text-align: right; }

/* Project dot */
.pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: 1px; margin-right: 8px; }