/* GraMedica Design System — Colors & Type
 * Source of truth: GraMedica Brand Standards Guide v2 (Mar 2026)
 * https://witty-glacier-05fbc320f.2.azurestaticapps.net/brand-guide/
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- BRAND COLORS ---- */
  --gm-primary-blue: #0071CA;      /* Light/white bgs ONLY */
  --gm-digital-blue: #27B1FA;      /* Dark/navy bgs ONLY. Never on white. */
  --gm-navy:         #0D1B2A;      /* Primary dark, text, hero bgs */
  --gm-orange:       #F26522;      /* Reserved accent — limited use */

  /* ---- NEUTRALS ---- */
  --gm-white:          #FFFFFF;    /* Default page bg */
  --gm-light-section:  #F8F9FB;    /* Alternating page sections */
  --gm-footer-gray:    #F2F4F7;    /* Email/document footers only */
  --gm-border:         #E4E8EE;
  --gm-border-strong:  #C8D1DB;
  --gm-text-muted:     #516173;
  --gm-text-subtle:    #788496;

  /* ---- SEMANTIC COLORS ---- */
  --gm-bg:             var(--gm-white);
  --gm-bg-alt:         var(--gm-light-section);
  --gm-bg-dark:        var(--gm-navy);
  --gm-fg:             var(--gm-navy);
  --gm-fg-on-dark:     var(--gm-white);
  --gm-fg-muted:       var(--gm-text-muted);
  --gm-fg-subtle:      var(--gm-text-subtle);
  --gm-link:           var(--gm-primary-blue);
  --gm-link-dark:      var(--gm-digital-blue);
  --gm-accent:         var(--gm-orange);

  /* State (derived — medical trust: green/amber, never red in UI chrome) */
  --gm-success: #1F9D55;
  --gm-warning: #C47A00;
  --gm-danger:  #B3261E;

  /* ---- TYPOGRAPHY ---- */
  --gm-font-heading: 'Outfit', 'Arial', 'Segoe UI', system-ui, sans-serif;
  --gm-font-body:    'DM Sans', 'Arial', 'Segoe UI', system-ui, sans-serif;

  /* Base sizes (DM Sans body, Outfit headings) */
  --gm-text-2xs: 11px;
  --gm-text-xs:  12px;
  --gm-text-sm:  14px;
  --gm-text-base:16px;
  --gm-text-md:  18px;
  --gm-text-lg:  20px;
  --gm-text-xl:  24px;
  --gm-text-2xl: 30px;
  --gm-text-3xl: 38px;
  --gm-text-4xl: 48px;
  --gm-text-5xl: 64px;
  --gm-text-6xl: 80px;

  --gm-leading-tight:  1.1;
  --gm-leading-snug:   1.25;
  --gm-leading-normal: 1.5;
  --gm-leading-relaxed:1.7;

  --gm-tracking-tight: -0.02em;
  --gm-tracking-snug:  -0.01em;
  --gm-tracking-wide:   0.04em;
  --gm-tracking-eyebrow:0.12em;  /* For UPPERCASE eyebrows */

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

  /* ---- RADII ---- */
  --gm-radius-xs: 2px;
  --gm-radius-sm: 4px;
  --gm-radius-md: 6px;    /* default for inputs, pills */
  --gm-radius-lg: 10px;   /* cards */
  --gm-radius-xl: 16px;   /* feature cards */
  --gm-radius-full: 9999px;

  /* ---- SHADOWS — restrained, clinical ---- */
  --gm-shadow-xs: 0 1px 1px rgba(13,27,42,0.04);
  --gm-shadow-sm: 0 1px 2px rgba(13,27,42,0.06), 0 1px 3px rgba(13,27,42,0.04);
  --gm-shadow-md: 0 4px 8px rgba(13,27,42,0.06), 0 2px 4px rgba(13,27,42,0.04);
  --gm-shadow-lg: 0 12px 24px rgba(13,27,42,0.08), 0 4px 8px rgba(13,27,42,0.05);
  --gm-shadow-focus: 0 0 0 3px rgba(0,113,202,0.25);

  /* ---- MOTION ---- */
  --gm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --gm-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --gm-dur-fast:      120ms;
  --gm-dur-base:      200ms;
  --gm-dur-slow:      320ms;

  /* ---- LAYOUT ---- */
  --gm-container:  1200px;
  --gm-container-narrow: 880px;
  --gm-section-y:  96px;
  --gm-nav-height: 88px;
}

/* ---- SEMANTIC TYPE CLASSES ---- */
.gm-eyebrow {
  font-family: var(--gm-font-body);
  font-size: var(--gm-text-xs);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gm-primary-blue);
}

.gm-h1, h1.gm {
  font-family: var(--gm-font-heading);
  font-weight: 700;
  font-size: clamp(40px, 5vw, var(--gm-text-5xl));
  line-height: var(--gm-leading-tight);
  letter-spacing: var(--gm-tracking-tight);
  color: var(--gm-navy);
}

.gm-h2, h2.gm {
  font-family: var(--gm-font-heading);
  font-weight: 700;
  font-size: clamp(30px, 3.5vw, var(--gm-text-4xl));
  line-height: var(--gm-leading-tight);
  letter-spacing: var(--gm-tracking-tight);
  color: var(--gm-navy);
}

.gm-h3, h3.gm {
  font-family: var(--gm-font-heading);
  font-weight: 600;
  font-size: var(--gm-text-2xl);
  line-height: var(--gm-leading-snug);
  letter-spacing: var(--gm-tracking-snug);
  color: var(--gm-navy);
}

.gm-h4, h4.gm {
  font-family: var(--gm-font-heading);
  font-weight: 600;
  font-size: var(--gm-text-xl);
  line-height: var(--gm-leading-snug);
  color: var(--gm-navy);
}

.gm-h5, h5.gm {
  font-family: var(--gm-font-heading);
  font-weight: 600;
  font-size: var(--gm-text-lg);
  line-height: var(--gm-leading-snug);
  color: var(--gm-navy);
}

.gm-lead {
  font-family: var(--gm-font-body);
  font-weight: 400;
  font-size: var(--gm-text-lg);
  line-height: var(--gm-leading-relaxed);
  color: var(--gm-text-muted);
}

.gm-body, p.gm {
  font-family: var(--gm-font-body);
  font-weight: 400;
  font-size: var(--gm-text-base);
  line-height: var(--gm-leading-relaxed);
  color: var(--gm-navy);
}

.gm-small {
  font-family: var(--gm-font-body);
  font-weight: 400;
  font-size: var(--gm-text-sm);
  line-height: var(--gm-leading-normal);
  color: var(--gm-text-muted);
}

.gm-caption {
  font-family: var(--gm-font-body);
  font-weight: 500;
  font-size: var(--gm-text-xs);
  line-height: var(--gm-leading-normal);
  color: var(--gm-text-subtle);
  letter-spacing: 0.01em;
}

.gm-stat {
  font-family: var(--gm-font-heading);
  font-weight: 700;
  font-size: clamp(48px, 6vw, var(--gm-text-6xl));
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--gm-primary-blue);
}

/* On-dark variants (navy hero sections) */
.gm-dark .gm-h1, .gm-dark .gm-h2, .gm-dark .gm-h3,
.gm-dark .gm-h4, .gm-dark .gm-h5, .gm-dark .gm-body,
.gm-dark h1.gm, .gm-dark h2.gm, .gm-dark h3.gm,
.gm-dark h4.gm, .gm-dark h5.gm, .gm-dark p.gm {
  color: var(--gm-white);
}
.gm-dark .gm-eyebrow { color: var(--gm-digital-blue); }
.gm-dark .gm-lead    { color: rgba(255,255,255,0.78); }
.gm-dark .gm-small   { color: rgba(255,255,255,0.66); }
.gm-dark .gm-stat    { color: var(--gm-digital-blue); }