/* JARMS design tokens — bold, cheeky, uncluttered */

:root {
  /* Core neutrals */
  --jm-ink: #0A0A0A;
  --jm-ink-2: #1F1F1F;
  --jm-text: #2A2A2A;
  --jm-text-soft: #5C5C5C;
  --jm-text-mute: #8A8A8A;
  --jm-rule: #1F1F1F;
  --jm-line: rgba(10,10,10,0.12);
  --jm-line-2: rgba(10,10,10,0.06);

  /* Cream surface — warmer than pure white, less clinical */
  --jm-bg: #F4EFE3;
  --jm-bg-2: #EBE4D2;
  --jm-card: #FFFDF7;
  --jm-card-ink: #FFFFFF;

  /* Accent (tweakable) — gold by default */
  --jm-accent: #E8B931;
  --jm-accent-ink: #0A0A0A;
  --jm-accent-shade: #C99A1A;
  --jm-accent-soft: #FFF1C7;

  /* Status colours */
  --jm-st-new: #2E5BFF;
  --jm-st-new-bg: #E2EAFF;
  --jm-st-accepted: #1B7A3E;
  --jm-st-accepted-bg: #DCEFE0;
  --jm-st-rejected: #C8362B;
  --jm-st-rejected-bg: #FCE0DC;
  --jm-st-offer: #C57A0F;
  --jm-st-offer-bg: #FDEDC9;
  --jm-st-closed: #6C6C6C;
  --jm-st-closed-bg: #E5E1D4;

  /* Type */
  --jm-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --jm-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jm-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii */
  --jm-r-sm: 6px;
  --jm-r-md: 10px;
  --jm-r-lg: 16px;
  --jm-r-pill: 999px;

  /* Shadow */
  --jm-shadow-sm: 0 1px 0 rgba(10,10,10,0.04), 0 2px 6px rgba(10,10,10,0.04);
  --jm-shadow-md: 0 2px 0 rgba(10,10,10,0.05), 0 12px 30px rgba(10,10,10,0.08);
  --jm-shadow-stamp: 4px 4px 0 var(--jm-ink);
}

/* Dashboard dark mode — only applies to .jm-app[data-dash-dark] */
.jm-app[data-dash-dark="true"] .jm-dash {
  --jm-ink: #F2EEDF;
  --jm-ink-2: #E2DECB;
  --jm-text: #E5E1D2;
  --jm-text-soft: #A8A498;
  --jm-text-mute: #7A7567;
  --jm-rule: #2C2A24;
  --jm-line: rgba(255,255,255,0.10);
  --jm-line-2: rgba(255,255,255,0.05);
  --jm-bg: #15140F;
  --jm-bg-2: #1C1B14;
  --jm-card: #1F1E16;
  --jm-card-ink: #1F1E16;
  --jm-shadow-sm: 0 1px 0 rgba(0,0,0,0.3);
  --jm-shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --jm-shadow-stamp: 4px 4px 0 var(--jm-accent);

  --jm-st-new-bg: #1F2A55;
  --jm-st-accepted-bg: #1B3526;
  --jm-st-rejected-bg: #4A1F1B;
  --jm-st-offer-bg: #4A3712;
  --jm-st-closed-bg: #2A2820;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--jm-bg);
  color: var(--jm-text);
  font-family: var(--jm-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 16px;
  line-height: 1.5;
}

a { color: inherit; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

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

/* ─── Typography utilities ─── */
.jm-display {
  font-family: var(--jm-display);
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--jm-ink);
}
.jm-mono {
  font-family: var(--jm-mono);
  letter-spacing: 0;
}
.jm-eyebrow {
  font-family: var(--jm-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jm-text-mute);
}

/* ─── Buttons ─── */
.jm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: var(--jm-r-md);
  font-family: var(--jm-display);
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.02em;
  border: 2px solid var(--jm-ink);
  background: var(--jm-ink);
  color: #FFF;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 4px 4px 0 var(--jm-ink);
}
.jm-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--jm-ink); }
.jm-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--jm-ink); }

.jm-btn-outline {
  background: transparent;
  color: var(--jm-ink);
}

.jm-btn-accent {
  background: var(--jm-accent);
  color: var(--jm-accent-ink);
  border-color: var(--jm-ink);
}

.jm-btn-sm {
  padding: 10px 14px;
  font-size: 12px;
  box-shadow: 2px 2px 0 var(--jm-ink);
}
.jm-btn-sm:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--jm-ink); }
.jm-btn-sm:active { transform: translate(1px,1px); box-shadow: 0 0 0 var(--jm-ink); }

.jm-btn-ghost {
  background: transparent;
  color: var(--jm-text);
  border-color: transparent;
  box-shadow: none;
  padding: 8px 12px;
  font-family: var(--jm-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
.jm-btn-ghost:hover { background: var(--jm-line-2); transform: none; box-shadow: none; }

.jm-btn[disabled], .jm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Inputs ─── */
.jm-input, .jm-textarea, .jm-select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--jm-ink);
  border-radius: var(--jm-r-md);
  background: var(--jm-card);
  color: var(--jm-ink);
  font-size: 16px;
  font-family: var(--jm-body);
  outline: none;
  transition: box-shadow .15s ease;
}
.jm-input:focus, .jm-textarea:focus, .jm-select:focus {
  box-shadow: 4px 4px 0 var(--jm-accent);
}
.jm-textarea { resize: vertical; min-height: 120px; font-family: var(--jm-body); }
.jm-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%230A0A0A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.jm-input::placeholder, .jm-textarea::placeholder { color: var(--jm-text-mute); }

.jm-label {
  display: block;
  font-family: var(--jm-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jm-ink);
  margin-bottom: 8px;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── Badge / Status pill ─── */
.jm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--jm-r-pill);
  font-family: var(--jm-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jm-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.jm-badge-new      { color: var(--jm-st-new);      background: var(--jm-st-new-bg); }
.jm-badge-accepted { color: var(--jm-st-accepted); background: var(--jm-st-accepted-bg); }
.jm-badge-rejected { color: var(--jm-st-rejected); background: var(--jm-st-rejected-bg); }
.jm-badge-offer    { color: var(--jm-st-offer);    background: var(--jm-st-offer-bg); }
.jm-badge-closed   { color: var(--jm-st-closed);   background: var(--jm-st-closed-bg); }

/* ─── Page chrome ─── */
.jm-page {
  min-height: 100vh;
  background: var(--jm-bg);
}

/* Mock photo placeholder — colourful blocks with diagonal stripe */
.jm-photo {
  position: relative;
  overflow: hidden;
  background: var(--jm-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(10,10,10,0.6);
  font-family: var(--jm-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.jm-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 18px, rgba(10,10,10,0.05) 18px 19px);
  pointer-events: none;
}

/* ─── Tape strip (decorative) ─── */
.jm-tape {
  display: inline-block;
  background: var(--jm-accent);
  color: var(--jm-ink);
  padding: 4px 14px;
  font-family: var(--jm-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

/* utility */
.jm-stack { display: flex; flex-direction: column; }
.jm-row { display: flex; align-items: center; }
.jm-grow { flex: 1 1 auto; }
.jm-hidden { display: none !important; }

/* Responsive: stack 2x2 value-props grid on narrow viewports */
@media (max-width: 640px) {
  .jm-vp-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Logo inverts inside the dashboard when dark mode is on */
.jm-app[data-dash-dark="true"] .jm-dash .jm-logo {
  filter: invert(1);
}

/* ─── Framed-stamp motif (pulled from the JARMS wordmark frame) ─── */
.jm-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 7px;
  border: 2px solid var(--jm-ink);
  border-radius: 4px;
  font-family: var(--jm-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jm-ink);
  background: transparent;
}
.jm-stamp::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50% 0 0 50% / 100% 0 0 100%;
  background: var(--jm-ink);
  margin-left: -4px;
}