/* Design System Variables & Tokens - Ridian Editorial Aesthetic */
:root {
  /* Exact Brand Color Palette */
  --ink:        #0B1B33;   /* dark navy — primary text / brand accent */
  --ink-soft:   #56637C;   /* secondary text, navy-gray */
  --paper:      #EFF6F1;   /* page background, cool mint-white */
  --paper-card: #FFFFFF;   /* card surface */
  --brass:      #2CC36B;   /* brand primary green — buttons, underline, chips */
  --brass-deep: #189652;   /* deeper green for text accents/refs */
  --green:      #189652;   /* "approved" ink — same brand green family */
  --green-soft: #E1F8EA;
  --void:       #B23B2E;   /* "void" stamp ink — contrast/problem color */
  --void-soft:  #F6E7E4;
  --line:       #DCE6E0;   /* hairlines */

  /* Typography System */
  --display: 'Fraunces', Georgia, serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Geometry & Elevation */
  --radius: 14px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
  --shadow: 0 1px 2px rgba(11,27,51,.05), 0 22px 44px -22px rgba(11,27,51,.22);
  --shadow-hover: 0 4px 12px rgba(11,27,51,.08), 0 30px 60px -20px rgba(11,27,51,.25);

  /* Container & Layout */
  --container-max: 1280px;
  --header-height: 84px;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Utilities */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.gradient-text {
  background: linear-gradient(135deg, var(--ink) 0%, var(--brass-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  border: 1px solid rgba(44, 195, 107, 0.3);
  color: var(--brass-deep);
  font-family: var(--mono);
  font-size: 0.825rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--brass);
  box-shadow: 0 0 8px var(--brass);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.7; }
}

.font-display {
  font-family: var(--display);
}

.font-mono {
  font-family: var(--mono);
}