/* ==========================================================================
   CyberMed Design System , Colors & Type
   Extracted from tailwind.config.ts + components in cybermed-web2
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap");

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --brand-coral: #f14a34;        /* Primary action / accent */
  --brand-coral-hover: #d63e2a;  /* Coral pressed/hover */
  --brand-blue: #1b6fbd;         /* Primary brand / header */
  --brand-blue-soft: #76a9d7;    /* Secondary accent */
  --brand-sky: #c2d9ed;          /* Background wash (top) */
  --brand-blush: #fbcfc9;        /* Background wash (bottom) */

  /* --- Slate neutral scale ---------------------------------------------- */
  --slate-50:  #e5edf8;
  --slate-100: #cedef0;
  --slate-200: #a4bdd6;
  --slate-300: #7b9bbf;
  --slate-400: #5377a0;
  --slate-500: #3c628a;
  --slate-600: #325276;
  --slate-700: #274262;
  --slate-800: #1c324e;
  --slate-900: #14263d;
  --slate-950: #0d1a2b;

  /* --- Surface + text tokens (semantic) --------------------------------- */
  --bg:          #ffffff;
  --bg-subtle:   #f8fafc;         /* slate-50/80 washes */
  --bg-muted:    var(--slate-50);
  --bg-dark:     var(--slate-900); /* newsletter CTA strip */

  --fg:          var(--slate-900);
  --fg-strong:   #0f172a;          /* tailwind slate-900 (body default) */
  --fg-muted:    #475569;          /* slate-600 body copy */
  --fg-subtle:   #64748b;          /* slate-500 captions */
  --fg-invert:   #ffffff;

  --border:      #e2e8f0;          /* slate-200 */
  --border-soft: #f1f5f9;          /* slate-100 */

  --link:        var(--brand-blue);
  --link-hover:  var(--brand-coral);

  /* --- Shadow + radius + spacing (subset used in product) --------------- */
  --shadow-glow: 0 15px 45px rgba(27, 111, 189, 0.15);
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:   0 4px 12px -2px rgb(15 23 42 / 0.08);

  --radius-sm:   0.5rem;   /* 8px */
  --radius-md:   0.75rem;  /* 12px */
  --radius-lg:   1rem;     /* 16px */
  --radius-xl:   1.25rem;  /* 20px , Tailwind override */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-3xl:  1.875rem; /* 30px , section cards */
  --radius-pill: 9999px;   /* buttons, eyebrow chips */

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;

  --fs-eyebrow:   0.75rem;   /* 12px , uppercase eyebrows */
  --fs-xs:        0.75rem;
  --fs-sm:        0.875rem;
  --fs-base:      1rem;
  --fs-lg:        1.125rem;
  --fs-xl:        1.25rem;
  --fs-2xl:       1.5rem;
  --fs-3xl:       1.875rem;
  --fs-4xl:       2.25rem;
  --fs-5xl:       3rem;

  --tracking-eyebrow: 0.3em;
  --tracking-wide:    0.05em;

  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-normal:    1.55;
  --lh-relaxed:   1.7;
}

/* ==========================================================================
   Base + semantic element styles
   ========================================================================== */

html { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02" on, "cv03" on;
}

/* Display + headings use Outfit */
h1, h2, h3, .display {
  font-family: var(--font-display);
  color: var(--slate-900);
  line-height: var(--lh-tight);
  font-weight: 600;
}

h1 { font-size: var(--fs-5xl); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--slate-900); font-weight: 600; }

p { color: var(--fg-muted); line-height: var(--lh-relaxed); }

a {
  color: var(--link);
  text-decoration: none;
  transition: color 200ms ease-out;
}
a:hover { color: var(--link-hover); }

/* Eyebrow / kicker , used above nearly every section title */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--brand-blue);
}

/* Utility: body copy sizes observed in product */
.body-lg { font-size: var(--fs-lg); color: var(--fg-muted); line-height: var(--lh-relaxed); }
.body-md { font-size: var(--fs-base); color: var(--fg-muted); line-height: var(--lh-normal); }
.body-sm { font-size: var(--fs-sm); color: var(--fg-muted); line-height: var(--lh-normal); }

/* Monospace , for SBOMs, code, CVE refs */
code, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
  background: var(--slate-50);
  color: var(--slate-800);
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
}