/* =========================================================================
   BIOWITE by Dr. Wolff — Core Tokens
   Lifestyle meets Science · Premium whitening in skincare aesthetic
   ========================================================================= */

/* ---- Font imports --------------------------------------------------------
   Brand direction: Grotesque / Geometric Sans (Futura, Helvetica Neue Light,
   GT America). We substitute with nearest Google Fonts equivalents and flag
   to the user — see README.md §Typography.
   ---------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

:root {
  /* ---------- COLOR: Core palette ------------------------------------- */
  --bw-white:        #FFFFFF;   /* Primary — dominates every surface      */
  --bw-off-white:    #F5F5F5;   /* Secondary — subtle surface separation  */
  --bw-paper:        #FAFAFA;   /* Whisper — used over pure white         */
  --bw-silver-100:   #EAEAEA;   /* Hairlines, soft dividers               */
  --bw-silver-200:   #D8D8D8;   /* Borders, input outlines                */
  --bw-silver-300:   #C0C0C0;   /* Metallic accent (brand support color)  */
  --bw-grey-400:     #8A8A8A;   /* Sub-labels, small caps                 */
  --bw-grey-500:     #5A5A5A;   /* Secondary body                         */
  --bw-ink-700:      #2A2A2A;   /* Primary body text                      */
  --bw-black:        #000000;   /* Accent — headlines, CTAs, logo         */

  /* ---------- COLOR: Semantic ----------------------------------------- */
  --bg:              var(--bw-white);
  --bg-alt:          var(--bw-off-white);
  --bg-inverse:      var(--bw-black);

  --fg1:             var(--bw-black);      /* Display / headlines          */
  --fg2:             var(--bw-ink-700);    /* Body                         */
  --fg3:             var(--bw-grey-500);   /* Secondary body               */
  --fg4:             var(--bw-grey-400);   /* Meta, small caps labels      */
  --fg-inverse:      var(--bw-white);

  --line:            var(--bw-silver-200); /* Hairline borders             */
  --line-soft:       var(--bw-silver-100);
  --metallic:        var(--bw-silver-300); /* Silver accent                */

  /* ---------- TYPOGRAPHY: Family -------------------------------------- */
  /* Archivo = closest Google Font to GT America / Helvetica Neue         */
  --font-display:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:       'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPOGRAPHY: Scale --------------------------------------- */
  --fs-xs:   11px;   /* micro labels, caps                                 */
  --fs-sm:   13px;   /* small caps, meta                                   */
  --fs-base: 15px;   /* body                                               */
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  40px;
  --fs-3xl:  56px;
  --fs-4xl:  80px;
  --fs-5xl:  112px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-relaxed:1.7;

  /* Signature brand spacing — wide tracking on caps headlines            */
  --ls-display:   0.04em;    /* +40 — headlines                            */
  --ls-caps-lg:   0.18em;    /* +180 — BIOWITE wordmark, section labels   */
  --ls-caps-md:   0.22em;    /* +220 — small caps sub-labels              */
  --ls-caps-sm:   0.26em;    /* +260 — micro caps                         */
  --ls-body:      0;
  --ls-tight:    -0.01em;    /* very large display only                   */

  /* ---------- SPACING ------------------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* ---------- RADII --------------------------------------------------- */
  /* Brand is minimal — prefer sharp edges. Radii used sparingly.        */
  --r-none:  0;
  --r-sm:    2px;
  --r-md:    4px;
  --r-lg:    8px;
  --r-pill:  999px;

  /* ---------- BORDERS ------------------------------------------------- */
  --bd-hairline: 1px solid var(--line);
  --bd-soft:     1px solid var(--line-soft);
  --bd-ink:      1px solid var(--bw-black);

  /* ---------- SHADOWS ------------------------------------------------- */
  /* Skincare-style soft product shadow. No glow, no colored lights.     */
  --sh-whisper: 0 1px 2px rgba(0,0,0,.03);
  --sh-soft:    0 4px 20px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03);
  --sh-product: 0 30px 60px -20px rgba(0,0,0,.15), 0 10px 20px -10px rgba(0,0,0,.08);
  --sh-float:   0 20px 50px -15px rgba(0,0,0,.12);

  /* ---------- MOTION -------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth:cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   160ms;
  --dur-base:   280ms;
  --dur-slow:   520ms;
}

/* ---- Base reset / body styles ----------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--fg2);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- Semantic type ----------------------------------------------------- */
.bw-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-caps-lg);
  text-transform: uppercase;
  color: var(--fg1);
}

.bw-display,
h1.bw {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
  text-transform: uppercase;
}

.bw-h1, h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg1);
}

.bw-h2, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg1);
  text-transform: uppercase;
}

.bw-h3, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-caps-md);
  color: var(--fg1);
  text-transform: uppercase;
}

.bw-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps-md);
  text-transform: uppercase;
  color: var(--fg4);
}

.bw-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-caps-md);
  text-transform: uppercase;
  color: var(--fg3);
}

.bw-body, p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.bw-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  letter-spacing: 0.01em;
}

.bw-meta {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--fg4);
}

/* Thin divider — the signature hairline between sections */
.bw-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-6) 0;
}