/* ============================================================
   MILKIFY DESIGN SYSTEM — COLORS & TYPE
   ------------------------------------------------------------
   Source of truth for the Milkify brand (consumer)
   and Milkify Medical sub-brand (clinical / B2B).

   Import with:
     <link rel="stylesheet" href="colors_and_type.css">

   All tokens are exposed as CSS custom properties under :root
   and re-declared semantically at the end (h1, p, code, etc).
   ============================================================ */

/* -------- Webfont: Poppins (primary family for both brands)
   Brand-supplied TTFs (fonts/). Full weight range 100–900 + italics. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Poppins-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Poppins-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Poppins-Black.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); }

:root {
  /* ==========================================================
     COLORS — CORE BRAND
     ========================================================== */

  /* Milkify navy — primary brand color.
     Used for headings, primary buttons, footer, and clinical authority. */
  --milkify-navy:          #1D2B51;
  --milkify-navy-light:    #283A66;
  --milkify-navy-dark:     #131D3A;

  /* Milkify teal — accent.
     Subtle teal/grey-blue that appears behind wave graphics,
     on icon lines, link hovers, and secondary CTAs.
     The consumer brand leans toward a more saturated blue
     (roughly #1E88B6 from the logo mark) — see --milkify-blue. */
  --milkify-teal:          #84A5BC;
  --milkify-teal-light:    #E5EEF3;
  --milkify-teal-dark:     #6B90A8;

  /* Consumer-side saturated blue (from the logo mark).
     Only used on the consumer brand; Medical uses navy + muted teal. */
  --milkify-blue:          #1E88B6;
  --milkify-blue-light:    #DCEFF7;
  --milkify-blue-dark:     #14678E;

  /* ==========================================================
     COLORS — NEUTRALS
     ========================================================== */
  --ink-900:               #131D3A;  /* same as navy-dark */
  --ink-800:               #2D3A4A;  /* body text default */
  --ink-600:               #5A6B7D;  /* secondary text */
  --ink-400:               #8E9BAA;  /* muted / meta */
  --ink-300:               #A9B4C1;  /* disabled */
  --ink-200:               #D1D9E2;  /* borders */
  --ink-100:               #E8EDF2;  /* card borders, dividers */
  --ink-50:                #F7F9FC;  /* off-white surfaces */
  --white:                 #FFFFFF;

  /* Brand grey from brand guidelines */
  --brand-gray:            #8F8D8D;

  /* Warm beige accent (used sparingly for caution/notice callouts) */
  --warm-50:               #FDFAF7;
  --warm-100:              #F5EDE4;

  /* ==========================================================
     COLORS — SEMANTIC (status)
     ========================================================== */
  --success:               #3A8A5C;
  --success-bg:            #E6F3EB;
  --warning:               #C98A2E;
  --warning-bg:            #FDF3E3;
  --danger:                #B54848;
  --danger-bg:             #FBEAEA;
  --info:                  var(--milkify-teal-dark);
  --info-bg:               var(--milkify-teal-light);

  /* ==========================================================
     COLORS — FUNCTIONAL ROLES
     ========================================================== */
  --bg:                    var(--white);
  --bg-subtle:             var(--ink-50);
  --bg-navy:               var(--milkify-navy);
  --bg-gradient-medical:   linear-gradient(135deg, #F7F9FC 0%, #E6F1F8 50%, #F7F9FC 100%);
  --bg-gradient-navy:      linear-gradient(135deg, #1D2B51 0%, #283A66 100%);

  --fg:                    var(--ink-800);
  --fg-muted:              var(--ink-600);
  --fg-subtle:             var(--ink-400);
  --fg-on-navy:            var(--white);
  --fg-on-navy-muted:      rgba(255,255,255,0.7);

  --border:                var(--ink-100);
  --border-strong:         var(--ink-200);

  --link:                  var(--milkify-teal-dark);
  --link-hover:            var(--milkify-navy);

  /* ==========================================================
     TYPE — FAMILIES
     ========================================================== */
  --font-heading:          'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:             'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:             ui-monospace, 'SF Mono', 'Consolas', 'Roboto Mono', monospace;

  /* ==========================================================
     TYPE — SCALE (rem-based, 1rem = 16px)
     Poppins is a geometric sans; we run it a hair tight
     (tracking -0.01 to -0.02em) on large display sizes.
     ========================================================== */
  --fs-xs:                 0.75rem;   /* 12px — captions, legal */
  --fs-sm:                 0.875rem;  /* 14px — meta, table, form labels */
  --fs-base:               1rem;      /* 16px — body */
  --fs-lg:                 1.125rem;  /* 18px — lead paragraphs */
  --fs-xl:                 1.25rem;   /* 20px — h4 */
  --fs-2xl:                1.5rem;    /* 24px — h3 */
  --fs-3xl:                1.875rem;  /* 30px — h2 small */
  --fs-4xl:                2.25rem;   /* 36px — h2 */
  --fs-5xl:                3rem;      /* 48px — h1 */
  --fs-6xl:                3.75rem;   /* 60px — hero h1 desktop */
  --fs-7xl:                4.5rem;    /* 72px — hero display */
  --fs-display:            6rem;      /* 96px — "MOM" hero word */

  /* Line-heights */
  --lh-tight:              1.05;      /* hero headings */
  --lh-heading:            1.15;      /* section headings */
  --lh-snug:               1.35;
  --lh-normal:             1.5;
  --lh-relaxed:            1.6;       /* default body */
  --lh-loose:              1.75;

  /* Weights */
  --fw-light:              300;
  --fw-normal:             400;
  --fw-medium:             500;
  --fw-semibold:           600;
  --fw-bold:               700;
  --fw-black:              800;

  /* Letter-spacing */
  --ls-tight:              -0.02em;   /* hero */
  --ls-snug:               -0.01em;   /* h1, h2 */
  --ls-normal:             0;
  --ls-wide:               0.04em;
  --ls-wider:              0.08em;    /* eyebrow uppercase */
  --ls-widest:             0.14em;    /* small caps / MEDICAL wordmark-style */

  /* ==========================================================
     SPACING (4px base)
     ========================================================== */
  --s-0:   0;
  --s-1:   0.25rem;   /* 4  */
  --s-2:   0.5rem;    /* 8  */
  --s-3:   0.75rem;   /* 12 */
  --s-4:   1rem;      /* 16 */
  --s-5:   1.25rem;   /* 20 */
  --s-6:   1.5rem;    /* 24 */
  --s-8:   2rem;      /* 32 */
  --s-10:  2.5rem;    /* 40 */
  --s-12:  3rem;      /* 48 */
  --s-16:  4rem;      /* 64 */
  --s-20:  5rem;      /* 80 */
  --s-24:  6rem;      /* 96 */
  --s-32:  8rem;      /* 128 */

  /* Section padding */
  --section-y:            5rem;       /* 80 */
  --section-y-lg:         7rem;       /* 112 */
  --container-max:        80rem;      /* 1280 — max-w-7xl equivalent */
  --container-pad:        1.25rem;    /* mobile */
  --container-pad-lg:     2rem;       /* desktop */

  /* ==========================================================
     RADII
     ========================================================== */
  --r-none:   0;
  --r-xs:     2px;
  --r-sm:     4px;
  --r-md:     6px;    /* small pills */
  --r-lg:     8px;    /* buttons default */
  --r-xl:     12px;   /* cards */
  --r-2xl:    16px;   /* feature cards */
  --r-3xl:    24px;   /* marketing image frames */
  --r-pill:   999px;

  /* ==========================================================
     SHADOWS — subtle; medical brand avoids dramatic drops
     ========================================================== */
  --shadow-xs:    0 1px 2px rgba(19, 29, 58, 0.04);
  --shadow-sm:    0 1px 3px rgba(19, 29, 58, 0.06), 0 1px 2px rgba(19, 29, 58, 0.04);
  --shadow-md:    0 4px 12px rgba(19, 29, 58, 0.06), 0 2px 4px rgba(19, 29, 58, 0.04);
  --shadow-lg:    0 10px 25px rgba(19, 29, 58, 0.08), 0 4px 10px rgba(19, 29, 58, 0.04);
  --shadow-teal:  0 8px 20px rgba(132, 165, 188, 0.25);
  --shadow-focus: 0 0 0 3px rgba(132, 165, 188, 0.35);

  /* ==========================================================
     MOTION
     ========================================================== */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:        120ms;
  --dur-base:        200ms;
  --dur-slow:        400ms;
  --dur-reveal:      600ms;
}

/* ============================================================
   BASE DOC
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   SEMANTIC TYPE — drop in and go
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--milkify-navy);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
  margin: 0;
}

h1 {
  font-size: clamp(2.25rem, 2vw + 2rem, var(--fs-6xl));
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: clamp(1.75rem, 1vw + 1.5rem, var(--fs-4xl));
  font-weight: var(--fw-bold);
}

h3 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
}

h4 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

h5 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

h6 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

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

.lead {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  line-height: var(--lh-relaxed);
}

.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--milkify-teal-dark);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

small, .caption {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}

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

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
  color: var(--milkify-navy);
}

/* ============================================================
   FOCUS
   ============================================================ */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--milkify-teal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============================================================
   UTILITY — small set that design cards lean on
   ============================================================ */
.bg-navy { background: var(--milkify-navy); color: var(--white); }
.bg-subtle { background: var(--bg-subtle); }
.bg-medical { background: var(--bg-gradient-medical); }
.text-navy { color: var(--milkify-navy); }
.text-teal { color: var(--milkify-teal-dark); }
.text-muted { color: var(--fg-muted); }

/* Reveal animation used site-wide */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fadeInUp var(--dur-reveal) var(--ease-out) forwards;
}