/* ProtoMed Color System
 * Built on deep navy + steel blue: authority, trust, healthcare precision.
 * Prestige Gold provides premium elevation moments.
 * The 60 / 30 / 10 rule: Dark Azure 60% · Azure 30% · Prestige Gold 10%.
 */
:root {
  /* ---- Primary palette (base values) ---- */
  --color-dark-azure: #01233A;   /* 60% — hero/footer/dark sections, primary CTA bg */
  --color-azure:      #1D527A;   /* 30% — accents, dividers, links, icon fills */
  --color-gold:       #C8A951;   /* 10% — highlighted stats, primary CTA buttons */
  --color-white:      #FFFFFF;   /* base — backgrounds, reversed text on dark */

  /* ---- Supporting palette ---- */
  --color-soft-cloud: #F4F7FA;   /* section backgrounds, card fills, info boxes */
  --color-deep-slate: #2B3A47;   /* ALL body copy — never pure #000000 */
  --color-mist-gray:  #E8EDF1;   /* borders, dividers, table rules, input fields */
  --color-steel-gray: #8A9BAA;   /* captions, labels, metadata, secondary copy */

  /* ---- Tints / derived steps (for hover, fills, washes) ---- */
  --color-dark-azure-90: #18394F; /* slightly lighter dark panel (trust bars) */
  --color-dark-azure-80: #2F4D62;
  --color-azure-12:      rgba(29, 82, 122, 0.12);  /* azure wash / icon chip bg */
  --color-azure-08:      rgba(29, 82, 122, 0.08);
  --color-gold-15:       rgba(200, 169, 81, 0.15); /* gold wash / highlight bg */
  --color-dark-azure-08: rgba(1, 35, 58, 0.08);    /* shadow / faint fill */
  --color-dark-azure-60: rgba(1, 35, 58, 0.60);    /* photo overlay min */
  --color-dark-azure-80a: rgba(1, 35, 58, 0.80);   /* photo overlay max */

  /* ---- Semantic aliases ---- */
  --surface-page:       var(--color-white);
  --surface-subtle:     var(--color-soft-cloud);
  --surface-card:       var(--color-white);
  --surface-dark:       var(--color-dark-azure);
  --surface-dark-panel: var(--color-dark-azure-90);
  --surface-input:      var(--color-white);

  --text-display:       var(--color-dark-azure);
  --text-heading:       var(--color-dark-azure);
  --text-body:          var(--color-deep-slate);
  --text-muted:         var(--color-steel-gray);
  --text-link:          var(--color-azure);
  --text-on-dark:       var(--color-white);
  --text-on-dark-muted: var(--color-steel-gray);

  --accent-primary:     var(--color-azure);
  --accent-premium:     var(--color-gold);

  --border-default:     var(--color-mist-gray);
  --border-strong:      var(--color-steel-gray);
  --border-accent:      var(--color-azure);

  /* On-brand website-only gradient: Dark Azure -> Azure (never on body copy bg) */
  --gradient-hero:  radial-gradient(120% 120% at 100% 0%, var(--color-azure) 0%, var(--color-dark-azure) 55%);
  --gradient-band:  linear-gradient(100deg, var(--color-dark-azure) 0%, var(--color-azure) 140%);
}


/* ProtoMed Typography System
 * Poppins exclusive. Geometric precision = expertise; rounded terminals = approachability.
 * Rules: never >3 type sizes per design · line-height 1.5–1.6 for body ·
 * max 70–80ch body measure · min weight Regular · min 12px visible text ·
 * Bold reserved for headings + key callout terms only.
 */
:root {
  /* ---- Family ---- */
  --font-sans: 'Poppins', 'Inter', system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  /* ---- Weights ---- */
  --weight-regular: 400;  /* body copy (minimum weight — never Thin/ExtraLight) */
  --weight-medium: 500;   /* H3, tagline */
  --weight-semibold: 600; /* H2, subheads, CTA/button labels */
  --weight-bold: 700;     /* display, H1, key callout terms */

  /* ---- Type scale (px) ---- */
  --fs-display: 72px;   /* Display/Hero — Bold 56–88 */
  --fs-h1: 44px;        /* Heading 1 — Bold 36–48 */
  --fs-h2: 30px;        /* Heading 2 — SemiBold 26–32 */
  --fs-h3: 22px;        /* Heading 3 — Medium 20–24 */
  --fs-body-lg: 17px;   /* Body large */
  --fs-body: 16px;      /* Body — Regular 15–17 */
  --fs-cta: 15px;       /* CTA/Button — SemiBold 13–15 */
  --fs-tagline: 15px;   /* Tagline — Medium 13–16 */
  --fs-caption: 13px;   /* Caption/Label — Regular 11–13 */
  --fs-micro: 12px;     /* absolute minimum visible size */

  /* ---- Line heights ---- */
  --lh-tight: 1.1;    /* @kind other */ /* display / large headings */
  --lh-heading: 1.25; /* @kind other */ /* H2/H3 */
  --lh-body: 1.55;    /* @kind other */ /* body copy (1.5–1.6) */

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em;  /* tighten large display */
  --ls-heading: -0.01em;
  --ls-normal: 0;      /* @kind other */
  --ls-label: 0.08em;     /* ALL-CAPS labels / section numbers / eyebrows */
  --ls-label-wide: 0.18em;

  /* ---- Semantic text style aliases ---- */
  --text-display-size: var(--fs-display);
  --text-heading-1-size: var(--fs-h1);
  --text-heading-2-size: var(--fs-h2);
  --text-heading-3-size: var(--fs-h3);
  --text-body-size: var(--fs-body);
  --text-caption-size: var(--fs-caption);
}


/* ProtoMed Spacing, Radius, Shadow & Layout
 * White space is a premium signal — generous spacing communicates confidence.
 * Sharp edges with SUBTLE radius (4–8px). Subtle box shadows for card elevation.
 */
:root {
  /* ---- Spacing scale (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;
  --space-24: 96px;
  --space-32: 128px;

  /* Section rhythm */
  --section-pad-y: var(--space-24);   /* generous vertical breathing room */
  --section-pad-x: var(--space-8);
  --content-max: 1200px;              /* max content width */
  --measure: 72ch;                    /* body copy max line length (70–80) */

  /* ---- Radius (subtle: 4–8px) ---- */
  --radius-sm: 4px;   /* buttons, inputs, chips */
  --radius-md: 6px;   /* CTA buttons */
  --radius-lg: 8px;   /* cards, panels */
  --radius-pill: 999px; /* trust/cert badge chips only */

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-accent-width: 4px;  /* card left-accent / top accent bar */
  --hr-gold-width: 48px;       /* Prestige Gold rule under dark-panel quotes */

  /* ---- Shadows (cool, navy-tinted — never warm/black) ---- */
  --shadow-card: 0 4px 20px rgba(1, 35, 58, 0.08);          /* canonical card elevation */
  --shadow-card-hover: 0 10px 30px rgba(1, 35, 58, 0.12);   /* hover lift */
  --shadow-sm: 0 1px 3px rgba(1, 35, 58, 0.06);
  --shadow-lg: 0 18px 50px rgba(1, 35, 58, 0.16);           /* dialogs / popovers */
  --shadow-focus: 0 0 0 3px rgba(29, 82, 122, 0.30);        /* focus ring (azure) */

  /* ---- Motion (restrained, professional — fades + gentle ease, no bounce) ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}