/* ============================================================
   medy.one — colors & type
   Editorial oyster + oxblood. Mixed-density patient + clinical.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Color: oyster (base / paper) ---------- */
  --oyster-50:  #FBF7F0;   /* raised surface */
  --oyster-100: #F6F1EA;   /* panel */
  --oyster-200: #EFE7DA;   /* page (default bg) */
  --oyster-300: #E8DCCB;
  --oyster-400: #DFCFB8;

  /* ---------- Color: oxblood (primary brand) ---------- */
  --oxblood-50:  #FBEEEC;
  --oxblood-100: #F4D6D2;
  --oxblood-200: #E5A8A1;
  --oxblood-400: #C24D44;
  --oxblood-500: #A8332A;   /* hover */
  --oxblood-600: #7A1D17;   /* PRIMARY brand red */
  --oxblood-700: #5C140F;   /* pressed */
  --oxblood-800: #3F0D09;

  /* ---------- Color: ink (text + dark surfaces) ---------- */
  --ink-900: #1A1714;       /* headings */
  --ink-800: #2B2620;       /* body */
  --ink-600: #4A413A;
  --ink-500: #6B6259;       /* secondary text */
  --ink-400: #8A8076;       /* tertiary text / placeholder */
  --ink-300: #ABA197;

  /* ---------- Color: sand (borders, dividers, chips) ---------- */
  --sand-100: #EFE5D2;
  --sand-200: #E0D2B8;       /* default border */
  --sand-300: #D9C9AC;       /* chip bg */
  --sand-400: #C9B89A;
  --sand-500: #B0A082;

  /* ---------- Color: semantic ---------- */
  --success-500: #3A6B45;
  --success-100: #DCE9DD;
  --warning-500: #B5811E;
  --warning-100: #F2E5C6;
  --info-500:    #2B5A78;
  --info-100:    #D4E1EB;
  --danger-500:  var(--oxblood-600);
  --danger-100:  var(--oxblood-100);

  /* ---------- Semantic foreground / background tokens ---------- */
  --bg-page:       var(--oyster-200);
  --bg-panel:      var(--oyster-100);
  --bg-raised:     var(--oyster-50);
  --bg-sunken:     var(--oyster-300);
  --bg-inverse:    var(--ink-900);

  --fg-primary:    var(--ink-900);
  --fg-body:       var(--ink-800);
  --fg-secondary:  var(--ink-500);
  --fg-tertiary:   var(--ink-400);
  --fg-on-brand:   var(--oyster-50);
  --fg-on-inverse: var(--oyster-100);

  --brand:         var(--oxblood-600);
  --brand-hover:   var(--oxblood-500);
  --brand-pressed: var(--oxblood-700);
  --brand-soft:    var(--oxblood-100);

  --border-default: var(--sand-200);
  --border-strong:  var(--sand-400);
  --border-subtle:  var(--sand-100);
  --border-focus:   var(--oxblood-600);

  /* ---------- Typography ---------- */
  --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (1.2 modular, 16px base) */
  --t-12:  0.75rem;     /* 12px — micro labels (tabular only) */
  --t-13:  0.8125rem;   /* 13px — fine print */
  --t-14:  0.875rem;    /* 14px — secondary UI */
  --t-16:  1rem;        /* 16px — body */
  --t-18:  1.125rem;    /* 18px — emphasized body */
  --t-20:  1.25rem;     /* 20px — section title */
  --t-24:  1.5rem;      /* 24px — sub-heading */
  --t-32:  2rem;        /* 32px — page heading */
  --t-40:  2.5rem;      /* 40px — hero (small) */
  --t-56:  3.5rem;      /* 56px — hero (default) */
  --t-72:  4.5rem;      /* 72px — display */

  /* Line heights */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* Weights */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ---------- Spacing (8pt grid) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---------- Radii ---------- */
  --r-sm:    4px;     /* tight, data tables */
  --r-md:    8px;     /* inputs, buttons, chips */
  --r-lg:    12px;
  --r-xl:    16px;    /* cards, panels */
  --r-2xl:   20px;    /* modals, sheets */
  --r-full:  9999px;  /* pills, avatars, dots */

  /* ---------- Shadows (warm, ink-tinted) ---------- */
  --shadow-sm: 0 1px 0 rgba(43,38,32,0.04), 0 1px 2px rgba(43,38,32,0.06);
  --shadow-md: 0 8px 24px -8px rgba(43,38,32,0.16), 0 2px 6px rgba(43,38,32,0.06);
  --shadow-lg: 0 24px 64px -16px rgba(43,38,32,0.24), 0 4px 10px rgba(43,38,32,0.08);
  --shadow-focus: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--oxblood-600);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:   cubic-bezier(0.6, 0, 0.85, 0.4);
  --d-fast:    120ms;
  --d-base:    200ms;
  --d-slow:    320ms;

  /* ---------- Layout ---------- */
  --container-narrow: 720px;
  --container-text:   860px;
  --container-page:   1080px;
  --container-wide:   1440px;
  --topbar-h:         64px;
  --sidenav-w:        240px;
}

/* ============================================================
   Reset-ish base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--t-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv05';
  font-variant-numeric: lining-nums proportional-nums;
}

::selection { background: var(--oxblood-600); color: var(--oyster-50); }

/* ============================================================
   Semantic typography
   ============================================================ */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(var(--t-40), 5vw, var(--t-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0;
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(var(--t-32), 3vw, var(--t-56));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0;
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0;
}

.h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-20);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0;
}

.h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-18);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-13);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.lede {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-body);
}

.p, p {
  font-size: var(--t-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-body);
  margin: 0;
}

.small {
  font-size: var(--t-14);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.micro {
  font-size: var(--t-12);
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-tertiary);
}

.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'zero';
  font-variant-numeric: tabular-nums;
}

.tabular {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--brand);
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color var(--d-fast) var(--ease-out);
}
a:hover { color: var(--brand-hover); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 2px; }

/* ============================================================
   Utility: paper grain (3% opacity overlay)
   ============================================================ */
.paper-grain { position: relative; }
.paper-grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image:
    radial-gradient(circle at 25% 25%, #000 0.5px, transparent 1px),
    radial-gradient(circle at 75% 75%, #000 0.5px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  mix-blend-mode: multiply;
}