/* =========================================================================
   PRIVITY — Shared Design System
   One system, two intensities: MARKETING (expressive journal) + APP (clean & calm)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Ink (text) ---- */
  --ink-900: #1d2230;
  --ink-600: #4b5468;
  --ink-400: #7a8294;

  /* ---- Lines ---- */
  --line: #c9cdd6;        /* system cool line */
  --line-warm: #e3dccd;   /* warm line for cream surfaces (app + marketing) */
  --line-soft: #ece6da;   /* faintest hairline on paper */

  /* ---- Accent (slate blue, kept) ---- */
  --accent: #4a6b8a;
  --accent-deep: #3a5670;
  --accent-bg: #e8edf2;
  --accent-ink: #345169;

  /* ---- Secondary accent (muted sepia / ink-brown) ---- */
  --sepia: #7d6552;
  --sepia-deep: #635040;
  --sepia-bg: #efe7d9;

  /* ---- Semantic ---- */
  --red: #b00020;
  --red-bg: #f7e6e8;
  --green: #2e7d52;
  --green-bg: #e4efe8;
  --amber: #a8741c;       /* DRAFT badge */
  --amber-bg: #f4ead4;

  /* ---- Surfaces ---- */
  --canvas: #f3efe6;      /* cream app/page canvas */
  --paper: #fdfbf6;       /* warm-white card paper */
  --paper-2: #f8f4ea;     /* slightly recessed paper */

  /* ---- Type ---- */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Shadow (restrained) ---- */
  --shadow-xs: 0 1px 2px rgba(29,34,48,0.04);
  --shadow-sm: 0 1px 3px rgba(29,34,48,0.06), 0 1px 2px rgba(29,34,48,0.04);
  --shadow-md: 0 4px 16px rgba(29,34,48,0.07);
  --shadow-lg: 0 18px 50px -12px rgba(29,34,48,0.18);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink-900);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

/* ---- Mono utility (labels, metadata, prices, note output) ---- */
.mono {
  font-family: var(--mono);
  font-feature-settings: "liga" 0;
}
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sepia);
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .04s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn-secondary {
  background: var(--paper);
  color: var(--ink-900);
  border-color: var(--line-warm);
}
.btn-secondary:hover { background: var(--paper-2); border-color: var(--ink-400); }

.btn-ghost {
  background: transparent;
  color: var(--accent-ink);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--accent-bg); }

.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { display: flex; width: 100%; }

/* =========================================================================
   CARDS
   ========================================================================= */
.card {
  background: var(--paper);
  border: 1px solid var(--line-warm);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
}
.card-pad { padding: 24px; }

/* =========================================================================
   BADGES / TAGS
   ========================================================================= */
.badge {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.badge-draft { background: var(--amber-bg); color: var(--amber); }
.badge-accent { background: var(--accent-bg); color: var(--accent-ink); }
.badge-sepia { background: var(--sepia-bg); color: var(--sepia-deep); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-neutral { background: #ece9e1; color: var(--ink-600); }

.tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-warm);
  color: var(--ink-600);
  background: var(--paper);
}

/* =========================================================================
   FORM CONTROLS
   ========================================================================= */
.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-600);
  display: block;
  margin-bottom: 9px;
}
.input, .select, .textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-900);
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-warm);
  border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8294' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

/* Dropzone */
.dropzone {
  border: 1.5px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-400);
  transition: border-color .15s ease, background .15s ease;
}
.dropzone.is-filled {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent-ink);
}

/* =========================================================================
   HELPERS
   ========================================================================= */
.divider { height: 1px; background: var(--line-warm); border: 0; margin: 0; }
.muted { color: var(--ink-400); }
.mid { color: var(--ink-600); }
.center { text-align: center; }
.stack-xs > * + * { margin-top: 6px; }
.stack-sm > * + * { margin-top: 12px; }
.stack > * + * { margin-top: 20px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Focus ring for selectable cards (pricing, etc.) */
.is-selected-ring {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow-xs);
}

::selection { background: var(--accent-bg); }