/*
 * Carte Medical — colors_and_type.css
 *
 * Single source-of-truth for color, typography, and spacing tokens. Mirrors
 * _reference/design-tokens.css from the original packet, and adds @font-face
 * rules so the three brand families load from local /fonts.
 *
 * Editorial publication aesthetic, not graphic-design flourish.
 * Reference points: Stripe Press, McKinsey research, HBR special reports.
 */

/* ───── @font-face — self-hosted brand families ────────────────────────── */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/EBGaramond-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/EBGaramond-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "MinervaModern";
  src: url("fonts/MinervaModern-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MinervaModern";
  src: url("fonts/MinervaModern-Bold.otf") format("opentype"),
       url("fonts/MinervaModern-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MinervaModern";
  src: url("fonts/MinervaModern-Black.otf") format("opentype"),
       url("fonts/MinervaModern-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MinervaModern";
  src: url("fonts/MinervaModern-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ───── COLOR — base tokens ─────────────────────────────────────────── */
  --carte-navy-deep: #01262f;          /* primary deep teal-navy (47× in legacy CSS) */
  --carte-navy-very-deep: #001338;     /* second brand surface */
  --carte-accent-green: #60b89f;       /* sole accent */
  --carte-cream: #fafafa;              /* page ground */
  --carte-white: #ffffff;              /* card fill on cream */
  --carte-rule: rgba(1, 38, 47, 0.18); /* hairline */
  --carte-rule-soft: #e6e6e6;          /* low-contrast divider */
  --carte-ink: #000000;                /* near-black body fallback */
  --carte-text: #01262f;               /* default body on cream */
  --carte-text-muted: #5d6a73;         /* slate, AA at body sizes (5.33:1) */
  --carte-text-inverse: #fafafa;       /* body on navy */
  --carte-error: #c0392b;              /* form error */
  --carte-success: #60b89f;            /* form success — reuse accent */

  /* Semantic — foreground / background */
  --fg-1: var(--carte-text);           /* primary text on cream */
  --fg-2: var(--carte-text-muted);     /* secondary text */
  --fg-inverse: var(--carte-text-inverse);
  --bg-page: var(--carte-cream);
  --bg-card: var(--carte-white);
  --bg-inverse: var(--carte-navy-deep);
  --bg-inverse-2: var(--carte-navy-very-deep);
  --rule: var(--carte-rule);
  --rule-soft: var(--carte-rule-soft);
  --rule-emphasis: var(--carte-text);
  --accent: var(--carte-accent-green);

  /* ───── TYPOGRAPHY — stacks ─────────────────────────────────────────── */
  --carte-font-display: "EB Garamond", "EB Garamond Variable", Georgia, "Times New Roman", serif;
  --carte-font-body: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --carte-font-smallcaps: "MinervaModern", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --carte-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (px) */
  --carte-fs-xs: 11px;
  --carte-fs-sm: 14px;
  --carte-fs-base: 17px;
  --carte-fs-md: 19px;
  --carte-fs-lg: 22px;
  --carte-fs-xl: 28px;
  --carte-fs-2xl: 36px;
  --carte-fs-3xl: 48px;
  --carte-fs-4xl: 62px;

  /* Line heights */
  --carte-lh-tight: 1.15; /* @kind font */
  --carte-lh-snug: 1.35; /* @kind font */
  --carte-lh-base: 1.55; /* @kind font */
  --carte-lh-relaxed: 1.65; /* @kind font */

  /* Weights */
  --carte-fw-regular: 400; /* @kind font */
  --carte-fw-medium: 500; /* @kind font */
  --carte-fw-semibold: 600; /* @kind font */
  --carte-fw-bold: 700; /* @kind font */

  /* Letter spacing */
  --carte-tracking-eyebrow: 0.18em;
  --carte-tracking-wordmark: 0.36em;
  --carte-tracking-label: 0.20em;

  /* ───── SPACING ─────────────────────────────────────────────────────── */
  --carte-space-1: 4px;
  --carte-space-2: 8px;
  --carte-space-3: 12px;
  --carte-space-4: 16px;
  --carte-space-5: 24px;
  --carte-space-6: 32px;
  --carte-space-7: 48px;
  --carte-space-8: 64px;
  --carte-space-9: 96px;
  --carte-space-10: 128px;

  /* Containers */
  --carte-container-narrow: 60ch;     /* prose */
  --carte-container-medium: 980px;
  --carte-container-wide: 1200px;
  --carte-container-mobile-pad: 24px;

  /* Borders — there are no shadows, no radii beyond 1px. By design. */
  --carte-border-hairline: 1px solid var(--carte-rule);
  --carte-border-soft: 1px solid var(--carte-rule-soft);
  --carte-border-emphasis: 1px solid var(--carte-navy-deep);
  --carte-border-accent: 3px solid var(--carte-accent-green);
  --carte-radius: 1px;                /* effectively square — prevents card-like rounding */

  /* Motion */
  --carte-duration-quick: 200ms; /* @kind other */
  --carte-duration-text: 600ms; /* @kind other */
  --carte-easing-default: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --carte-easing-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
}

/* ───── HONOR REDUCED MOTION ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───── SEMANTIC ELEMENT DEFAULTS ─────────────────────────────────────── */

body {
  font-family: var(--carte-font-body);
  font-size: var(--carte-fs-base);
  line-height: var(--carte-lh-base);
  color: var(--fg-1);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--carte-font-display);
  font-weight: var(--carte-fw-regular);
  color: var(--fg-1);
  line-height: var(--carte-lh-snug);
  letter-spacing: -0.005em;
  margin: 0 0 0.5em 0;
}
h1 { font-size: var(--carte-fs-4xl); line-height: var(--carte-lh-tight); }
h2 { font-size: var(--carte-fs-2xl); }
h3 { font-size: var(--carte-fs-xl); }
h4 { font-size: var(--carte-fs-lg); font-weight: var(--carte-fw-medium); }
h5 { font-size: var(--carte-fs-md); font-weight: var(--carte-fw-medium); }

p {
  font-family: var(--carte-font-display);
  font-size: var(--carte-fs-md);
  line-height: var(--carte-lh-relaxed);
  margin: 0 0 1.05em 0;
}

code, pre {
  font-family: var(--carte-font-mono);
  font-size: 0.92em;
}

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
  transition: opacity var(--carte-duration-quick) var(--carte-easing-default);
}
a:hover { opacity: 0.7; }

/* Eyebrow — small-caps section label */
.eyebrow,
.carte-eyebrow {
  font-family: var(--carte-font-smallcaps);
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  text-transform: uppercase;
  letter-spacing: var(--carte-tracking-eyebrow);
  font-size: var(--carte-fs-xs);
  font-weight: var(--carte-fw-medium);
  color: var(--fg-1);
}

/* Wordmark — typeset CARTE MEDICAL in MinervaModern small-caps */
.wordmark {
  font-family: var(--carte-font-smallcaps);
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  text-transform: uppercase;
  letter-spacing: var(--carte-tracking-wordmark);
  font-weight: var(--carte-fw-medium);
}

::selection { background: rgba(96, 184, 159, 0.28); color: var(--fg-1); }