:root {
  /* Same design tokens as the case study page */
  --brand: 31 98 255;          /* primary brand */
  --ink: 17 24 39;             /* slate-900 */
  --muted: 100 116 139;        /* slate-500 */
  --surface: 248 250 252;      /* slate-50 */
  --ring: 203 213 225;         /* slate-300 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: 15 23 42;
    --ink: 241 245 249;
    --muted: 148 163 184;
    --ring: 51 65 85;
  }
}

@media print {
  .no-print { 
    display: none !important; 
  }
  body { 
    background: #fff !important; 
  }
  .card {
    box-shadow: none !important;
    border: 1px solid rgb(226 232 240);
  }
}

textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 
    "Liberation Mono", "Courier New", monospace;
}

/* GLOBAL TYPOGRAPHY
   Make everything use the same larger font size
--------------------------------------------------*/

body,
td,
th {
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* If you truly want headings NOT to be bigger, keep this.
   If you want headings larger, you can delete this block. */
h1, h2, h3, h4, h5, h6 {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 600;
}

/* Override Tailwind text size utilities so they all render the same size */
.text-xs,
.text-sm,
.text-base,
.text-lg,
.text-xl,
.text-2xl,
.text-3xl,
.text-4xl,
.text-5xl,
.text-6xl,
.text-7xl,
.text-8xl,
.text-9xl {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #000000;
}

/* Optional: make small “muted” text match as well */
.text-[color\:rgb\(var\(--muted\)\)] {
  font-size: 19px !important;
  line-height: 1.6 !important;
}