/* ============================================================================
   BioProfile — Design Tokens (v1.0)
   The first-principle brand layer. Every other stylesheet reads from here.
   Source of truth: BIOPROFILE rejuvenation brand book (15/07/2024) + the
   bioprofile.com category concept (2026-07-03).

   Rules baked in from the brand book:
   - Teal (#005859) is primary. "Use the green colors for infographics and
     small details" -> the rejuvenation greens are the DATA-VIZ palette only.
   - Poppins throughout (Light for oversized display, Regular body,
     Medium for UI labels/CAPS, SemiBold for headings).
   - "Use a lot of white." Rounded corners. Line icons with rounded caps.
   ========================================================================== */

:root {
  /* ---- Core brand ------------------------------------------------------- */
  --bp-teal:        #005859;   /* primary. logo, key CTAs, "Now" pillar      */
  --bp-teal-700:    #013f40;   /* pressed / deep                              */
  --bp-teal-600:    #00696a;   /* hover                                       */
  --bp-teal-80:     #337a7a;   /* brand book "home teal 80%"                  */
  --bp-teal-60:     #669b9b;   /* "60%"                                       */
  --bp-teal-40:     #99bcbc;   /* "40%"                                       */
  --bp-teal-08:     #eef3f3;   /* teal wash / active row                      */

  --bp-sand:        #dbd4cd;   /* brand "additional color" — warm neutral     */
  --bp-sand-soft:   #f4f1ec;   /* warm section background                     */
  --bp-slate:       #3d6b7b;   /* rejuvenation blue — secondary accent        */

  /* ---- Rejuvenation framework = the DATA-VIZ / infographics palette ------ */
  /* Also the 4-pillar nav gradient: Analysis->Advice->Coach->Now            */
  --bp-lime:        #b7cb32;   /* live purposefully   -> Analysis            */
  --bp-olive:       #7ca64c;   /* calm the mind       -> Advice              */
  --bp-emerald:     #228a62;   /* challenge the body  -> Coach               */
  --bp-forest:      #006b62;   /* nourish the cells   -> Now / Home          */

  /* categorical series for charts (ordered, brand-derived, distinguishable) */
  --viz-1: var(--bp-teal);
  --viz-2: var(--bp-lime);
  --viz-3: var(--bp-slate);
  --viz-4: var(--bp-emerald);
  --viz-5: var(--bp-olive);
  --viz-6: var(--bp-sand);

  /* The signature analysis meter: achieved score vs the gap to 100%         */
  --viz-score: var(--bp-teal);     /* filled from the bottom = your score    */
  --viz-gap:   var(--bp-lime);     /* remainder up to 100% = headroom        */
  --viz-track: #eef1ee;            /* empty track                            */

  /* ---- Ink / paper (warm neutral ramp, sits with sand) ------------------ */
  --ink:      #14302f;   /* primary text — warm near-black teal              */
  --ink-2:    #4d5f5d;   /* secondary text                                   */
  --ink-3:    #869492;   /* tertiary / captions / axis labels                */
  --ink-4:    #aab6b3;   /* disabled / faint                                 */
  --line:     #e6ece9;   /* hairlines                                        */
  --line-2:   #d5ddd9;   /* stronger dividers                                */
  --paper:    #ffffff;
  --paper-2:  #f6f9f8;   /* app canvas                                       */
  --paper-3:  #eef3f1;   /* raised-in-canvas / hover                         */
  --ink-dark: #14211f;   /* dark sections (hero band, footer)               */

  /* ---- Status ----------------------------------------------------------- */
  --ok:     #228a62;
  --warn:   #d99a2b;
  --alert:  #c1502e;   /* red-flag handoff ("see your doctor")               */
  --ok-08:   #e9f4ef;
  --warn-08: #f8efdc;
  --alert-08:#f7e9e3;

  /* ---- Typography ------------------------------------------------------- */
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;

  --w-light: 300;
  --w-reg:   400;
  --w-med:   500;
  --w-semi:  600;
  --w-bold:  700;

  /* fluid type scale (mobile-first; grows with viewport) */
  --t-display: clamp(2.2rem, 1.4rem + 4vw, 4rem);   /* marketing hero        */
  --t-h1:      clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
  --t-h2:      clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
  --t-h3:      clamp(1.12rem, 1rem + .5vw, 1.3rem);
  --t-lg:      1.0625rem;
  --t-body:    0.95rem;
  --t-sm:      0.85rem;
  --t-xs:      0.75rem;
  --t-eyebrow: 0.72rem;  /* uppercase labels                                 */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.62;
  --ls-caps:  0.12em;   /* letter-spacing for CAPS labels                    */

  /* ---- Radius (brand = rounded, buttons = pill) ------------------------- */
  --r-pill: 999px;
  --r-xl:   22px;
  --r-lg:   16px;
  --r-md:   12px;
  --r-sm:   8px;

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

  /* ---- Elevation (soft, low, brand-calm) -------------------------------- */
  --sh-1: 0 1px 2px rgba(20,48,47,.05), 0 1px 1px rgba(20,48,47,.04);
  --sh-2: 0 2px 8px rgba(20,48,47,.06), 0 1px 2px rgba(20,48,47,.05);
  --sh-3: 0 10px 30px rgba(20,48,47,.10), 0 2px 8px rgba(20,48,47,.06);
  --sh-4: 0 22px 60px rgba(20,48,47,.16), 0 6px 18px rgba(20,48,47,.08);
  --sh-nav: 0 12px 30px rgba(0,74,74,.18);

  /* ---- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(.2, .7, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-1: .14s;
  --dur-2: .24s;
  --dur-3: .42s;
  --dur-chart: .9s;

  /* ---- App shell metrics ------------------------------------------------ */
  --topbar-h: 64px;
  --sidebar-w: 220px;
  --sidebar-w-rail: 88px;
  --nav-row-h: 54px;
  --content-max: 1120px;
  --page-max: 1280px;
}

/* Respect users who prefer reduced motion — charts appear at final state. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: .001s; --dur-2: .001s; --dur-3: .001s; --dur-chart: .001s; }
}