/* ═══════════════════════════════════════════════════════════════
   FIRST DRAFT COFFEE — SHARED DESIGN SYSTEM (Direction B — bold marketplace)
   Same component classes as before, re-skinned: bold Manrope type,
   pill buttons/chips, rounded cards, rust + teal two-accent system.
   Light theme is default; [data-theme="dark"] flips it.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Mono:wght@300;400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:      #16130E;
  --paper:    #F5F1E9;
  --surface:  #FFFFFF;
  --surfacedim: #ECE6D8;
  --rust:     #B8451E;
  --rustlit:  #D4622A;
  --teal:     #0F8F80;
  --tealbright: #5EEAD4;
  --gold:     #8A5A16;
  --sage:     #2F5A3E;
  --danger:   #A6362B;
  --mist:     rgba(22,19,14,0.05);
  --rule:     rgba(22,19,14,0.1);
  --rulemed:  rgba(22,19,14,0.2);

  --ink-70: rgba(22,19,14,0.7);
  --ink-65: rgba(22,19,14,0.65);
  --ink-62: rgba(22,19,14,0.62);
  --ink-55: rgba(22,19,14,0.55);
  --ink-50: rgba(22,19,14,0.5);
  --ink-45: rgba(22,19,14,0.45);
  --ink-40: rgba(22,19,14,0.4);
  --ink-35: rgba(22,19,14,0.35);
  --ink-30: rgba(22,19,14,0.3);
  --ink-25: rgba(22,19,14,0.25);
  --ink-15: rgba(22,19,14,0.15);

  --masthead-text: rgba(245,241,233,0.65);
  --masthead-text-hover: #F5F1E9;

  --font-display: 'Manrope', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'DM Mono', monospace;
}

html[data-theme="dark"] {
  --ink:      #F5F1E9;
  --paper:    #100E0B;
  --surface:  #1C1917;
  --surfacedim: #262119;
  --rust:     #E0693A;
  --rustlit:  #EE8354;
  --teal:     #5EEAD4;
  --tealbright: #9EF5E4;
  --gold:     #C89030;
  --sage:     #6EC78E;
  --danger:   #E8756A;
  --mist:     rgba(245,241,233,0.06);
  --rule:     rgba(245,241,233,0.1);
  --rulemed:  rgba(245,241,233,0.18);

  --ink-70: rgba(245,241,233,0.7);
  --ink-65: rgba(245,241,233,0.65);
  --ink-62: rgba(245,241,233,0.6);
  --ink-55: rgba(245,241,233,0.55);
  --ink-50: rgba(245,241,233,0.5);
  --ink-45: rgba(245,241,233,0.45);
  --ink-40: rgba(245,241,233,0.4);
  --ink-35: rgba(245,241,233,0.35);
  --ink-30: rgba(245,241,233,0.3);
  --ink-25: rgba(245,241,233,0.25);
  --ink-15: rgba(245,241,233,0.15);
}
html[data-theme="dark"] .fdc-nav { background: rgba(16,14,11,0.94); border-bottom-color: rgba(245,241,233,0.08); }
html[data-theme="dark"] .fdc-modal-overlay { background: rgba(0,0,0,0.65); }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}

/* ── TYPE HELPERS ─────────────────────────────────────────────── */
.fdc-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  display: flex; align-items: center; gap: 0.75rem;
  font-weight: 400;
}
.fdc-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--rust); border-radius: 2px; flex-shrink: 0; }

.fdc-h1, .fdc-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}
.fdc-h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.fdc-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.fdc-h1 em, .fdc-h2 em { font-style: normal; color: var(--teal); }

.fdc-body { font-size: 0.95rem; line-height: 1.7; color: var(--ink-62); font-weight: 400; }

/* ── BUTTONS — pill-shaped, bold, sentence case ──────────────── */
.fdc-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  border: none;
  padding: 0.85rem 1.6rem;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s;
}
.fdc-btn:active { transform: scale(0.98); }
.fdc-btn-primary { background: var(--rust); color: #fff; }
.fdc-btn-primary:hover { background: var(--rustlit); }
.fdc-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.fdc-btn-teal { background: var(--teal); color: #fff; }
html[data-theme="dark"] .fdc-btn-teal { color: #0F2C27; }
.fdc-btn-teal:hover { opacity: 0.88; }

.fdc-btn-ghost { background: transparent; color: var(--ink-55); border: 1.5px solid var(--rule); }
.fdc-btn-ghost:hover { color: var(--ink); border-color: var(--rulemed); }

/* ── CARDS — rounded, higher contrast ────────────────────────── */
.fdc-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.5rem 1.6rem;
  transition: border-color 0.15s, transform 0.15s;
}
.fdc-card:hover { border-color: var(--rulemed); transform: translateY(-2px); }
.fdc-card.accent-rust { border-left: 4px solid var(--rust); }
.fdc-card.accent-sage { border-left: 4px solid var(--teal); }

/* ── PAY DISPLAY — big bold number, small label ──────────────── */
.fdc-pay { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--teal); text-align: right; line-height: 1; white-space: nowrap; }
.fdc-pay small { display: block; font-size: 0.55rem; font-weight: 600; color: var(--ink-40); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.3rem; }

/* ── BADGES / CHIPS — pill, bold sans, not mono ──────────────── */
.fdc-badge {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.65rem;
  padding: 0.32rem 0.75rem;
  border-radius: 100px;
  display: inline-block;
  white-space: nowrap;
}
.badge-urgent   { background: rgba(166,54,43,0.1);  color: #A6362B; }
.badge-event    { background: rgba(15,143,128,0.12); color: var(--teal); }
.badge-sca      { background: rgba(47,90,62,0.1);   color: #2F5A3E; }
.badge-new      { background: var(--ink);           color: var(--paper); }
.badge-parttime { background: var(--mist);          color: var(--ink-50); }
html[data-theme="dark"] .badge-sca { color: #6EC78E; }
html[data-theme="dark"] .badge-urgent { color: #E8756A; }

/* ── FORMS ────────────────────────────────────────────────────── */
.fdc-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 0.4rem;
}
.fdc-input, .fdc-select, .fdc-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.fdc-input:focus, .fdc-select:focus, .fdc-textarea:focus { border-color: var(--teal); }
.fdc-input::placeholder, .fdc-textarea::placeholder { color: var(--ink-30); }
.fdc-textarea { min-height: 90px; resize: vertical; }

.fdc-checkbox-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.fdc-checkbox-label {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--ink-55);
  cursor: pointer;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--rule);
  border-radius: 100px;
  background: var(--paper);
  transition: border-color 0.15s, background 0.15s;
}
.fdc-checkbox-label:has(input:checked) { border-color: var(--teal); background: rgba(15,143,128,0.08); color: var(--ink); }
.fdc-checkbox-label input { display: none; }

/* ── MODAL ────────────────────────────────────────────────────── */
.fdc-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(22,19,14,0.5);
  backdrop-filter: blur(3px);
  z-index: 500;
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem;
}
.fdc-modal-overlay.open { display: flex; }
.fdc-modal {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 2.5rem;
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  animation: fdc-modal-in 0.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes fdc-modal-in { from { opacity:0; transform: scale(0.96) translateY(12px); } to { opacity:1; transform:none; } }
.fdc-modal-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: var(--mist); color: var(--ink);
  cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}

/* ── TOAST ────────────────────────────────────────────────────── */
.fdc-toast {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--ink); color: var(--paper);
  padding: 1rem 1.75rem; border-radius: 100px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.8rem;
  z-index: 600;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.fdc-toast.show { transform: translateX(-50%) translateY(0); }
.fdc-toast.error { background: var(--danger); color: #fff; }

/* ── EMPTY STATE ──────────────────────────────────────────────── */
.fdc-empty {
  padding: 3rem 2rem; text-align: center;
  border: 2px dashed var(--rule); border-radius: 16px;
  color: var(--ink-35); font-size: 0.85rem; font-style: italic;
}

/* ── NAV — dark masthead in both themes ──────────────────────── */
.fdc-nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2rem;
  background: rgba(22,19,14,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245,241,233,0.08);
}
.fdc-nav-logo {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #F5F1E9;
  text-decoration: none; letter-spacing: -0.02em;
}
.fdc-nav-logo em { font-style: normal; color: var(--tealbright); }
.fdc-nav-links { display: flex; align-items: center; gap: 0.25rem; list-style: none; }
.fdc-nav-links a {
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  color: var(--masthead-text); text-decoration: none;
  padding: 0.5rem 0.9rem; border-radius: 100px; transition: color 0.15s, background 0.15s;
}
.fdc-nav-links a:hover, .fdc-nav-links a.active { color: var(--masthead-text-hover); background: rgba(245,241,233,0.08); }
.fdc-nav-links a.active { color: var(--tealbright); }
@media (max-width: 640px) {
  .fdc-nav { padding: 1rem 1.25rem; flex-wrap: wrap; gap: 0.75rem; }
  .fdc-nav-links { gap: 0; flex-wrap: wrap; }
  .fdc-nav-links a { padding: 0.4rem 0.6rem; font-size: 0.68rem; }
}

.fdc-theme-toggle {
  font-family: var(--font-body); font-weight: 600; font-size: 0.7rem;
  background: rgba(245,241,233,0.08); border: 1px solid rgba(245,241,233,0.15); color: var(--masthead-text);
  padding: 0.45rem 0.85rem; border-radius: 100px; cursor: pointer; transition: color 0.15s, background 0.15s;
  margin-left: 0.5rem;
}
.fdc-theme-toggle:hover { color: var(--masthead-text-hover); background: rgba(245,241,233,0.14); }

/* ── ICONS ────────────────────────────────────────────────────── */
.fdc-icon { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; vertical-align: -2px; flex-shrink: 0; }

/* ── META LABELS — editorial key/value pairs ─────────────────── */
.fdc-meta-row { display: flex; flex-wrap: wrap; gap: 0.3rem 1.15rem; font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-40); }
.fdc-meta-row span { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.fdc-meta-row .meta-k { color: var(--ink-35); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.6rem; font-weight: 600; }
.fdc-meta-row .meta-v { color: var(--ink-70); font-weight: 500; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .fdc-h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
}