/* Mintz Design System Tokens */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Geist:wght@400;500;600&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&display=swap');

:root {
  /* Palette */
  --paper: #FAF7F0;
  --paper-deep: #F2EEE3;
  --card: #FFFFFF;
  --card-raised: #FFFFFF;
  
  --ink: #1B1A17;
  --ink-soft: #3A3833;
  --ink-muted: #6E685D;
  
  --mint-500: #00A661;
  --mint-600: #008B51;
  --mint-700: #006B3E;
  --mint-splash: #2EE89D;
  
  --clay-500: #D97757;
  --gold-500: #B89540;
  --rule: #E6E0CE;
  
  --accent: var(--mint-500);
  --accent-hover: var(--mint-600);
  --accent-on: #FFFFFF;

  /* Typography */
  --serif: 'Newsreader', serif;
  --sans: 'Geist', sans-serif;
  --mono: 'Geist Mono', monospace;
  
  --fs-14: 14px;
  --fs-16: 16px;

  /* Geometry */
  --r-btn: 8px;
  --r-4: 14px;
  --r-5: 20px;
  --r-pill: 9999px;

  /* Shadows - Warm Tinted */
  --shadow-1: 0 1px 3px rgba(40, 30, 20, 0.05), 0 1px 2px rgba(40, 30, 20, 0.02);
  --shadow-2: 0 4px 6px -1px rgba(40, 30, 20, 0.05), 0 2px 4px -1px rgba(40, 30, 20, 0.02);
  --shadow-3: 0 10px 15px -3px rgba(40, 30, 20, 0.05), 0 4px 6px -2px rgba(40, 30, 20, 0.02);
  --shadow-4: 0 20px 25px -5px rgba(40, 30, 20, 0.05), 0 10px 10px -5px rgba(40, 30, 20, 0.02);
  --shadow-stamp: 0 2px 8px rgba(40, 30, 20, 0.1);
  
  /* Button Effects */
  --btn-emboss: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0,0,0,0.1), 0 1px 3px rgba(40,30,20,0.05);
  --btn-emboss-press: inset 0 2px 4px rgba(0,0,0,0.15);
  
  --focus-ring: 0 0 0 3px rgba(0, 166, 97, 0.3);
  
  /* Motion */
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Base Typography Rules */
body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--paper);
  font-size: var(--fs-16);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

/* Links */
a.mintz-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(0, 166, 97, 0.3);
  text-underline-offset: 4px;
  transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out);
}
a.mintz-link:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}

/* Cards */
.card {
  background-color: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-4);
  box-shadow: none;
  transition: box-shadow 200ms var(--ease-out);
}
.card.interactive:hover {
  box-shadow: var(--shadow-2);
}
.card-raised {
  background-color: var(--card-raised);
  box-shadow: var(--shadow-1);
}

/* Canonical Button Recipe */
.btn {
  font-family: var(--sans);
  font-size: var(--fs-14);
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--r-btn);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--btn-emboss);
  white-space: nowrap;
  transition: transform 80ms var(--ease-out),
              box-shadow 80ms var(--ease-out),
              background 120ms var(--ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:active {
  transform: translateY(1px);
  box-shadow: var(--btn-emboss-press);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--btn-emboss), var(--focus-ring);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--mint-500);
  color: var(--accent-on);
}
.btn-primary:hover:not(:disabled) {
  background: var(--mint-600);
}

.btn-secondary {
  background: var(--card-raised);
  color: var(--ink);
}
.btn-secondary:hover:not(:disabled) {
  filter: brightness(0.97);
}

.btn-clay {
  background: var(--clay-500);
  color: #FBF8EF;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(0,0,0,0.03);
}
.btn-ghost:active {
  box-shadow: none;
  transform: none;
}

/* Sizes */
.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}
.btn-lg {
  padding: 14px 26px;
  font-size: var(--fs-16);
}

/* Utilities */
.bg-paper { background-color: var(--paper); }
.bg-paper-deep { background-color: var(--paper-deep); }
.text-ink { color: var(--ink); }
.text-ink-soft { color: var(--ink-soft); }
.text-ink-muted { color: var(--ink-muted); }
.border-rule { border-color: var(--rule); }