/* =====================================================================
   Dr. Semion Roitman — Endodontics & R&D
   Brand color & type tokens
   Source: official Brandbook V2 (logo, palette, type spec) + 14 IG posts
   ===================================================================== */

/* Webfonts — Google Fonts substitutes for the brandbook fonts.
   Brandbook specifies: Myriad (Semibold, Regular) + Seravek (Medium, Regular, Light).
   Substitutes: Source Sans 3 → Myriad-equivalent humanist sans for titles.
                Nunito Sans   → Seravek-equivalent rounded humanist for body.
   Replace with licensed Myriad/Seravek when available. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@600;700;800&family=Nunito+Sans:wght@300;400;600;700&display=swap');

:root {
  /* ---------- Brand colors (from Brandbook V2 page 4) ---------- */
  --sr-blue:           #0c7e91;   /* Main 1  — RGB 12 / 126 / 145 */
  --sr-turquoise:      #0ab291;   /* Main 2  — RGB 10 / 178 / 145 */
  --sr-orange:         #fda632;   /* Accent  — RGB 253 / 166 / 50  */
  --sr-white:          #ffffff;

  /* ---------- Extended palette derived from IG posts ---------- */
  --sr-navy:           #0c2952;   /* Bold body headlines on white (e.g. "WHAT IS THE BEST NEEDLE DESIGN") */
  --sr-blue-deep:      #075c6b;   /* Hover / pressed state of --sr-blue */
  --sr-blue-soft:      #9bcdd4;   /* Light tooth-icon stroke seen in icon row */
  --sr-blue-tint:      #e7f2f4;   /* Pale fill / hover surface */
  --sr-orange-soft:    #ffd592;   /* Highlight pill behind --sr-orange text */
  --sr-orange-deep:    #e08a1d;   /* Pressed orange */
  --sr-ink:            #102a3a;   /* Body text on white */
  --sr-ink-2:          #3d5566;   /* Secondary body */
  --sr-line:           #d6e4e7;   /* Hairline rules */
  --sr-bg:             #ffffff;
  --sr-bg-alt:         #f4f9fa;   /* Subtle off-white */

  /* ---------- Brand gradient ---------- */
  --sr-gradient: linear-gradient(135deg, var(--sr-blue) 0%, var(--sr-turquoise) 100%);

  /* ---------- Semantic colors ---------- */
  --color-bg:          var(--sr-bg);
  --color-bg-alt:      var(--sr-bg-alt);
  --color-fg:          var(--sr-ink);
  --color-fg-muted:    var(--sr-ink-2);
  --color-primary:     var(--sr-blue);
  --color-primary-fg:  #ffffff;
  --color-secondary:   var(--sr-turquoise);
  --color-accent:      var(--sr-orange);
  --color-headline:    var(--sr-blue);     /* Big educational H1s */
  --color-headline-alt:var(--sr-navy);     /* Question-style H1s */
  --color-link:        var(--sr-blue);
  --color-line:        var(--sr-line);
  --color-success:     var(--sr-turquoise);
  --color-warning:     var(--sr-orange);

  /* ---------- Type families ---------- */
  --font-display: "Source Sans 3", "Myriad Pro", "Myriad", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Nunito Sans", "Seravek", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   80px;     /* IG hero "IF YOU HAVE ANY QUESTIONS" */

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.45;
  --leading-loose:  1.6;

  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-caps:     0.08em;   /* "ENDODONTICS AND R&D" tagline */

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Radii ---------- */
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-pill:  999px;
  --radius-circle:50%;

  /* ---------- Borders ---------- */
  --border-thin:   1px solid var(--sr-line);
  --border-card:   2px solid var(--sr-navy);     /* Heavy navy frame seen on stat-charts */
  --border-circle: 3px solid var(--sr-blue);     /* Teal ring around clinical photos */

  /* ---------- Shadows (used sparingly — brand is largely flat) ---------- */
  --shadow-sm: 0 1px 2px rgba(12, 41, 82, 0.06);
  --shadow-md: 0 4px 12px rgba(12, 41, 82, 0.08);
  --shadow-lg: 0 16px 40px rgba(12, 41, 82, 0.12);
}

/* =====================================================================
   Semantic element styles
   ===================================================================== */

body {
  font-family: var(--font-body);
  color: var(--color-fg);
  background: var(--color-bg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* H1 — big, ALL CAPS teal headline. Carries the post / slide. */
.sr-h1, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  color: var(--color-headline);
  text-transform: uppercase;
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}

/* H1 alt — navy variant for "WHAT IS / WHY / HOW" question hooks */
.sr-h1-navy {
  color: var(--color-headline-alt);
}

/* H2 — orange section label ("FIRST: DO THE VITALITY TEST") */
.sr-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}

/* H3 — body section header in navy */
.sr-h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--sr-navy);
  margin: 0 0 var(--space-3);
}

/* Body — bold humanist sans, navy ink, comfortable leading */
p, .sr-body {
  font-family: var(--font-body);
  font-weight: 700;            /* IG posts use heavy body weight */
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--sr-navy);
  margin: 0 0 var(--space-4);
}

/* "Highlight" — a phrase pulled out of body copy in turquoise or orange */
.sr-emph-teal   { color: var(--sr-turquoise); }
.sr-emph-orange { color: var(--sr-orange); }
.sr-emph-blue   { color: var(--sr-blue); }

/* Tagline / eyebrow — small uppercase wide-tracked label */
.sr-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--sr-blue);
}

/* Caption / footnote */
.sr-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--sr-ink-2);
  line-height: var(--leading-normal);
}

a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 120ms ease;
}
a:hover { color: var(--sr-blue-deep); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--sr-blue-tint);
  color: var(--sr-blue-deep);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}