/* ============================================================
   Zentum Design System — Color & Type tokens
   ============================================================ */

/* Web fonts (from Google Fonts CDN) ---------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ----------------------------------------------------------
     COLOR — brand & primitives
     ---------------------------------------------------------- */

  /* Brand blue (the trustworthy spine of the product) */
  --zentum-blue-50:  #F0F7FF;   /* page tint, mobile background */
  --zentum-blue-100: #DDEBFA;   /* Basic plan chip bg */
  --zentum-blue-150: #C5DCF5;   /* outline / soft accent */
  --zentum-blue-200: #97BFE5;   /* hover tint */
  --zentum-blue-300: #79B3E7;   /* light brand stroke */
  --zentum-blue-400: #6397D6;   /* SIGNATURE Zentum blue — most-used hue */
  --zentum-blue-500: #509BE1;   /* button gradient stop A */
  --zentum-blue-600: #1071B6;   /* button gradient stop B / link */
  --zentum-blue-700: #006BB2;   /* deep accent on photo overlay */
  --zentum-blue-800: #183D81;   /* footer gradient top */
  --zentum-blue-900: #00428A;   /* darkest navy */
  --zentum-blue-footer-bottom: #3968AF; /* footer gradient bottom */

  /* Orange — the rare, earned CTA color */
  --zentum-orange-100: #FCE4D2;
  --zentum-orange-400: #FBA15F;   /* hover gradient stop */
  --zentum-orange-500: #F87F2E;   /* PRIMARY CTA */
  --zentum-orange-600: #E0651A;   /* press */

  /* Plan-tier pastel accents */
  --zentum-plan-basic:    #DDEBFA;   /* blue tint label */
  --zentum-plan-basic-fg: #1071B6;
  --zentum-plan-core:     #E4DCF8;   /* lavender tint label */
  --zentum-plan-core-fg:  #6F4DC9;
  --zentum-plan-adv:      #FADCE3;   /* rose tint label */
  --zentum-plan-adv-fg:   #C44A66;

  /* Biomarker status colors */
  --zentum-status-inrange:    #1FA85C;   /* green — in range */
  --zentum-status-inrange-bg: rgba(31, 168, 92, 0.12);
  --zentum-status-improving:    #E6A521;   /* yellow — mejorando */
  --zentum-status-improving-bg: rgba(251, 188, 5, 0.20);
  --zentum-status-outrange:    #E25E3E;   /* red/orange — fuera de rango */
  --zentum-status-outrange-bg: rgba(226, 94, 62, 0.12);
  --zentum-status-none:    #A4A7AC;       /* gray — none */
  --zentum-status-none-bg: rgba(164, 167, 172, 0.15);
  --zentum-status-pending: #6397D6;       /* blue — pending */
  --zentum-status-pending-bg: rgba(99, 151, 214, 0.15);

  /* Neutrals — foreground */
  --zentum-fg-1:  #0C0C0D;   /* primary text */
  --zentum-fg-2:  #111827;   /* deep slate alt */
  --zentum-fg-3:  #0F172A;   /* hero numbers */
  --zentum-fg-4:  #777C83;   /* secondary text */
  --zentum-fg-5:  #A4A7AC;   /* tertiary / placeholders */
  --zentum-fg-6:  #B1B2B8;   /* disabled */
  --zentum-fg-7:  #475569;   /* table row text */
  --zentum-fg-8:  #64748B;   /* tabular muted */

  /* Neutrals — background */
  --zentum-bg-canvas:  #FFFFFF;
  --zentum-bg-page:    #F4F5F7;   /* dashboard page bg */
  --zentum-bg-tint:    #F0F7FF;   /* signature soft blue tint */
  --zentum-bg-card:    #FFFFFF;
  --zentum-bg-input:   #F4F5F7;
  --zentum-bg-overlay: rgba(15, 23, 42, 0.45);

  /* Borders */
  --zentum-border-hairline: rgba(13, 13, 12, 0.05);
  --zentum-border-input:    rgba(99, 151, 214, 0.15);
  --zentum-border-divider:  #E5E7EB;
  --zentum-border-strong:   #CBD5E1;

  /* ----------------------------------------------------------
     GRADIENTS — reusable
     ---------------------------------------------------------- */
  --zentum-grad-primary:  linear-gradient(180deg, #1272B7 0%, #6196D4 100%);
  --zentum-grad-primary-hover: linear-gradient(180deg, #0A5FA0 0%, #4A82C2 100%);
  --zentum-grad-cta:      linear-gradient(180deg, #FBA15F 0%, #F87F2E 100%);
  --zentum-grad-cta-hover: linear-gradient(180deg, #F08A40 0%, #E0651A 100%);
  --zentum-grad-footer:   linear-gradient(180deg, #183D81 0%, #3968AF 100%);
  --zentum-grad-photo-overlay: linear-gradient(180deg, rgba(0,107,178,0.05) 0%, rgba(0,66,138,0.05) 100%);

  /* ----------------------------------------------------------
     SHADOW SYSTEM
     ---------------------------------------------------------- */
  /* The signature soft "long-throw" lift used on the floating header */
  --zentum-shadow-float:
    1px  1px  4px 0 rgba(0,0,0,0.02),
    4px  6px  7px 0 rgba(0,0,0,0.02),
    9px 13px 10px 0 rgba(0,0,0,0.01),
   16px 23px 11px 0 rgba(0,0,0,0.00),
   25px 37px 12px 0 rgba(0,0,0,0.00);
  --zentum-shadow-card: 0 1px 2px rgba(0,0,0,0.04);
  --zentum-shadow-pop:  0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 8px rgba(15, 23, 42, 0.06);
  --zentum-shadow-cta:  0 2px 0 rgba(224, 101, 26, 0.20);

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --zentum-radius-xs: 4px;     /* tiny badges */
  --zentum-radius-sm: 6px;     /* inline chips */
  --zentum-radius-md: 12px;    /* small action buttons, inputs */
  --zentum-radius-lg: 16px;    /* primary buttons, secondary cards */
  --zentum-radius-xl: 24px;    /* cards, header pill, footer */
  --zentum-radius-2xl: 32px;   /* plan-picker cards */
  --zentum-radius-pill: 999px;

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

  /* ----------------------------------------------------------
     TYPE — families
     ---------------------------------------------------------- */
  --zentum-font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zentum-font-body:    "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zentum-font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zentum-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----------------------------------------------------------
     TYPE — semantic
     ---------------------------------------------------------- */
  --zentum-h-hero-size:  120px;  /* Zentum Score number */
  --zentum-h-hero-lh:    76.665px;
  --zentum-h-hero-track: -4.423px;
  --zentum-h-hero-weight: 500;

  --zentum-h1-size:  36px;   --zentum-h1-lh: 1.20;  --zentum-h1-track: -0.030em;  --zentum-h1-weight: 700;
  --zentum-h2-size:  28px;   --zentum-h2-lh: 1.15;  --zentum-h2-track: -0.030em;  --zentum-h2-weight: 600;
  --zentum-h3-size:  24px;   --zentum-h3-lh: 1.40;  --zentum-h3-track: -0.030em;  --zentum-h3-weight: 500;
  --zentum-h4-size:  20px;   --zentum-h4-lh: 1.20;  --zentum-h4-track: -0.030em;  --zentum-h4-weight: 500;
  --zentum-h5-size:  18px;   --zentum-h5-lh: 1.30;  --zentum-h5-track: -0.020em;  --zentum-h5-weight: 500;

  --zentum-body-lg-size: 16px;  --zentum-body-lg-lh: 1.30;  --zentum-body-lg-track: -0.010em;
  --zentum-body-md-size: 14px;  --zentum-body-md-lh: 1.40;  --zentum-body-md-track: -0.010em;
  --zentum-body-sm-size: 12px;  --zentum-body-sm-lh: 1.30;  --zentum-body-sm-track: -0.010em;
  --zentum-body-xs-size: 10px;  --zentum-body-xs-lh: 1.20;  --zentum-body-xs-track:  0;

  --zentum-cap-size: 12px;  --zentum-cap-lh: 1.30;  --zentum-cap-track: -0.010em;
}

/* ============================================================
   Semantic element styles — drop colors_and_type.css into a
   page and you get sensible defaults.
   ============================================================ */
html { color-scheme: light; }

body {
  font-family: var(--zentum-font-body);
  color: var(--zentum-fg-1);
  background: var(--zentum-bg-canvas);
  font-weight: 500;
  font-size: var(--zentum-body-md-size);
  line-height: var(--zentum-body-md-lh);
  letter-spacing: var(--zentum-body-md-track);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .zentum-h1 {
  font-family: var(--zentum-font-display);
  font-weight: var(--zentum-h1-weight);
  font-size: var(--zentum-h1-size);
  line-height: var(--zentum-h1-lh);
  letter-spacing: var(--zentum-h1-track);
  color: var(--zentum-fg-1);
  margin: 0;
}
h2, .zentum-h2 {
  font-family: var(--zentum-font-display);
  font-weight: var(--zentum-h2-weight);
  font-size: var(--zentum-h2-size);
  line-height: var(--zentum-h2-lh);
  letter-spacing: var(--zentum-h2-track);
  color: var(--zentum-fg-3);
  margin: 0;
}
h3, .zentum-h3 {
  font-family: var(--zentum-font-body);
  font-weight: var(--zentum-h3-weight);
  font-size: var(--zentum-h3-size);
  line-height: var(--zentum-h3-lh);
  letter-spacing: var(--zentum-h3-track);
  color: var(--zentum-fg-1);
  margin: 0;
}
h4, .zentum-h4 {
  font-family: var(--zentum-font-body);
  font-weight: var(--zentum-h4-weight);
  font-size: var(--zentum-h4-size);
  line-height: var(--zentum-h4-lh);
  letter-spacing: var(--zentum-h4-track);
  color: var(--zentum-fg-1);
  margin: 0;
}

p { margin: 0; }

.zentum-hero-num {
  font-family: var(--zentum-font-display);
  font-weight: var(--zentum-h-hero-weight);
  font-size: var(--zentum-h-hero-size);
  line-height: var(--zentum-h-hero-lh);
  letter-spacing: var(--zentum-h-hero-track);
  color: var(--zentum-fg-3);
}

.zentum-cap {
  font-family: var(--zentum-font-ui);
  font-size: var(--zentum-cap-size);
  font-weight: 500;
  line-height: var(--zentum-cap-lh);
  letter-spacing: var(--zentum-cap-track);
  text-transform: uppercase;
}

.zentum-mono { font-family: var(--zentum-font-mono); }

/* Surface helpers */
.zentum-card {
  background: var(--zentum-bg-card);
  border-radius: var(--zentum-radius-xl);
  border: 1px solid var(--zentum-border-hairline);
}
.zentum-card-elevated {
  background: var(--zentum-bg-card);
  border-radius: var(--zentum-radius-xl);
  box-shadow: var(--zentum-shadow-float);
}