/* ============================================================
   MART MEDICAL — Design System Tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Brand Colors */
  --color-navy:        #0B1E36;
  --color-blue:        #1A5FA8;
  --color-blue-mid:    #3A8FD1;
  --color-blue-tint:   #E8F1FB;
  --color-blue-light:  #B5D4F4;

  /* Neutrals */
  --color-white:       #FFFFFF;
  --color-gray-50:     #F5F6F8;
  --color-gray-100:    #E8EAED;
  --color-gray-300:    #C2C8D0;
  --color-gray-500:    #8A9AAA;
  --color-gray-700:    #4A5568;
  --color-ink:         #1C2630;

  /* Semantic */
  --color-success:     #27500A;
  --color-success-bg:  #EAF3DE;
  --color-warning:     #633806;
  --color-warning-bg:  #FAEEDA;

  /* Typography */
  --font-serif:        'Playfair Display', Georgia, serif;
  --font-sans:         'Inter', system-ui, sans-serif;

  /* Font Sizes */
  --text-display:      36px;
  --text-h1:           28px;
  --text-h2:           22px;
  --text-h3:           16px;
  --text-eyebrow:      11px;
  --text-body:         15px;
  --text-small:        13px;
  --text-caption:      11px;

  /* Spacing */
  --space-4:    4px;
  --space-8:    8px;
  --space-12:   12px;
  --space-16:   16px;
  --space-24:   24px;
  --space-32:   32px;
  --space-48:   48px;
  --space-64:   64px;
  --space-96:   96px;

  /* Layout */
  --container-max:  1200px;
  --container-pad:  48px;
  --border-radius:  2px;
  --border-radius-md: 4px;

  /* Borders */
  --border-default: 0.5px solid rgba(0,0,0,0.12);
  --border-strong:  1px solid rgba(0,0,0,0.18);
  --border-brand:   1.5px solid var(--color-blue);

  /* Transitions */
  --transition: 0.2s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-blue-mid); }

/* ── Typography ── */
.t-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-ink);
}
.t-h1 {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-ink);
}
.t-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-ink);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.t-body {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-ink);
}
.t-small {
  font-size: var(--text-small);
  color: var(--color-gray-500);
  line-height: 1.6;
}
.t-caption {
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
}

/* ── Layout ── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.section-pad { padding: var(--space-96) 0; }
.section-pad-sm { padding: var(--space-64) 0; }

/* ── Dividers ── */
.divider { border: none; border-top: 0.5px solid var(--color-gray-100); }
.divider-brand { border: none; border-top: 1.5px solid var(--color-blue); width: 40px; }