/* Clinical Boss design tokens
   Fonts: Poppins (display) + DM Sans (text), both Google Fonts.
   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@1&display=swap');
*/

:root {
  /* Core palette */
  --cb-deep: #0C6A8A;
  --cb-cream: #FBF7F2;
  --cb-ink: #0B2530;
  --cb-orange: #FF9E47;
  --cb-teal: #7AC5CC;
  --cb-lavender: #AF9DE3;
  --cb-peach: #FFC187;
  --cb-lavender-light: #DDD5F6;
  --cb-pink: #FDC3DB;

  /* Support neutrals */
  --cb-white: #FFFFFF;
  --cb-line: #DCD3C9;
  --cb-muted: #5A6E77;
  --cb-deep-dark: #08506A;
  --cb-orange-hover: #F28A2E;

  /* Semantic */
  --cb-bg: var(--cb-cream);
  --cb-bg-inverse: var(--cb-deep);
  --cb-text: var(--cb-ink);
  --cb-text-inverse: var(--cb-cream);
  --cb-heading: var(--cb-deep);
  --cb-heading-inverse: var(--cb-cream);
  --cb-eyebrow: var(--cb-deep);
  --cb-eyebrow-inverse: var(--cb-teal);
  --cb-subhead-inverse: var(--cb-lavender-light);
  --cb-cta-bg: var(--cb-orange);
  --cb-cta-text: var(--cb-ink);
  --cb-highlight: var(--cb-peach);

  /* Type */
  --cb-font-display: "Poppins", system-ui, sans-serif;
  --cb-font-text: "DM Sans", system-ui, sans-serif;
  --cb-font-accent: "Instrument Serif", Georgia, serif; /* italic only: accent words, sign-offs, sticky notes */

  --cb-size-display: clamp(44px, 6.2vw, 72px);
  --cb-size-h1: clamp(38px, 4.8vw, 56px);
  --cb-size-h2: clamp(30px, 3.6vw, 40px);
  --cb-size-h3: clamp(22px, 2.4vw, 26px);
  --cb-size-h4: clamp(18px, 1.8vw, 20px);
  --cb-size-eyebrow: 13px;
  --cb-size-lead: clamp(19px, 1.9vw, 21px);
  --cb-size-body: clamp(17px, 1.6vw, 18px);
  --cb-size-small: 15px;
  --cb-size-quote: clamp(22px, 2.6vw, 28px);
  --cb-size-button: 16px;

  --cb-track-display: -0.03em;
  --cb-track-h1: -0.02em;
  --cb-track-h2: -0.015em;
  --cb-track-eyebrow: 0.18em;
  --cb-track-button: 0.04em;

  /* Space (8px base) */
  --cb-space-1: 8px;
  --cb-space-2: 16px;
  --cb-space-3: 24px;
  --cb-space-4: 32px;
  --cb-space-5: 40px;
  --cb-space-6: 48px;
  --cb-space-8: 64px;
  --cb-space-10: 80px;
  --cb-space-12: 96px;
  --cb-space-14: 112px;
  --cb-section-y: clamp(72px, 9vw, 112px);
  --cb-container: 1160px;
  --cb-reading: 720px;
  --cb-gutter: clamp(20px, 3vw, 32px);

  /* Shape */
  --cb-radius-sm: 12px;
  --cb-radius-md: 16px;
  --cb-radius-lg: 24px;
  --cb-radius-social: 40px; /* at 1080px canvas */
  --cb-radius-pill: 999px;
  --cb-tick-rotate: 15deg;
  --cb-hairline: 3px;
  --cb-shadow-card: 0 10px 30px rgba(11, 37, 48, 0.08);

  /* Photo recipe */
  --cb-photo-overlay: rgba(12, 106, 138, 0.18);
  --cb-photo-offset: 28px; /* web; use 72px on 1080 social canvas */
}