/* ============================================================================
   HOXTON PHARMA — COLORS & TYPE TOKENS
   ----------------------------------------------------------------------------
   Canonical source of truth: the Figma asset library "asset library – pharma"
   (2lkXcrW1iHH2HhIc567Q5m), extended with applied-usage patterns from the
   investor intro deck (June 2026). See uploads/pharma-DESIGN.md.

   Palette (the brand team's five named colors):
     Industrial dark blue  #031520   primary text, icon strokes, deep surfaces
     Pharma blue           #0104C5   wordmark, primary CTAs, links, hero series
     Pharma burnt orange   #E5532A   secondary accent — emphasis, alerts, one
                                     focal element per view. Never on top of blue.
     Pharma beige          #F5F4EE   warm off-white, default page on light
     Pharma grey           #D9D9D9   neutral grey for surfaces, dividers,
                                     placeholder fills, baseline data series

   Type — TWO families, per the Figma type spec:
     Manrope (600 SemiBold / 700 Bold)  display + headings
     Inter   (400 Regular)              body + small paragraph
     Line-height 1.0 (single-leading) and tracking a uniform -0.03em across the
     whole system. JetBrains Mono is a documented extension for tabular data,
     dosages, and identifiers (the brand spec is silent on a mono face).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --hp-blue:        #0104C5;   /* "Pharma blue" — wordmark, primary CTAs, links */
  --hp-blue-600:    #0103A8;   /* hover */
  --hp-blue-700:    #01038A;   /* press */
  --hp-blue-300:    #5052E0;   /* tints, illustration */
  --hp-blue-100:    #B5B6F0;   /* surfaces, badge bg */
  --hp-blue-50:     #E5E5FA;   /* page tints, hover surfaces */

  --hp-ink:         #031520;   /* "Industrial dark blue" — primary text, deep surfaces */
  --hp-ink-700:     #0A2230;
  --hp-ink-500:     #2E4654;   /* secondary text */
  --hp-ink-400:     #56707D;   /* tertiary text */
  --hp-ink-300:     #8FA1AB;   /* placeholder, disabled */
  --hp-ink-200:     #C9D1D6;   /* borders */
  --hp-ink-100:     #E2E7EA;   /* subtle dividers */
  --hp-ink-50:      #F1F3F5;   /* surface tints */

  --hp-bone:        #F5F4EE;   /* "Pharma beige" — page backgrounds */
  --hp-bone-dark:   #E8E6DC;
  --hp-paper:       #FFFFFF;

  --hp-grey:        #D9D9D9;   /* "Pharma grey" — neutral, non-blue grey */
  --hp-grey-light:  #ECECEC;
  --hp-grey-dark:   #B8B8B8;

  /* ---------- SPEC TOKEN ALIASES ----------
     The Figma library's own variable names, mapped to the --hp-* primitives so
     code can reference either. Prefer the --hp-* names in new work. */
  --color-industrial-dark-blue: var(--hp-ink);
  --color-pharma-blue:          var(--hp-blue);
  --color-pharma-burnt-orange:  var(--hp-orange);
  --color-pharma-beige:         var(--hp-bone);
  --color-pharma-grey:          var(--hp-grey);

  /* ---------- ACCENTS ---------- */
  --hp-orange:      #E5532A;   /* "Burnt orange" — SECONDARY ACCENT.
                                  Considered, industrial, slightly contrarian.
                                  Used for emphasis, callouts, one focal element
                                  per view. Always against ink, paper, or bone —
                                  never on top of Pharma blue. */
  --hp-orange-600:  #C2421E;   /* hover */
  --hp-orange-700:  #9E3618;   /* press */
  --hp-orange-bg:   #FBE8DF;   /* tint surface */

  /* Legacy aliases — pink + coral were earlier explorations. Both now resolve
     to burnt orange so older surfaces keep rendering. New work should
     reference --hp-orange directly. */
  --hp-pink:        var(--hp-orange);
  --hp-pink-600:    var(--hp-orange-600);
  --hp-pink-bg:     var(--hp-orange-bg);
  --hp-coral:       var(--hp-orange);
  --hp-coral-600:   var(--hp-orange-600);
  --hp-coral-bg:    var(--hp-orange-bg);

  /* Status accents — only used in semantic contexts, never decoratively */
  --hp-mint:        #7AE0C2;   /* positive / success */
  --hp-mint-bg:     #E5F8F1;
  --hp-amber:       #F4B740;   /* caution / pending */
  --hp-amber-bg:    #FDF3DD;

  /* ---------- SEMANTIC TOKENS — LIGHT ---------- */
  --bg-page:        var(--hp-bone);
  --bg-surface:     var(--hp-paper);
  --bg-surface-2:   var(--hp-ink-50);
  --bg-inverse:     var(--hp-ink);

  --fg-1:           var(--hp-ink);          /* primary text */
  --fg-2:           var(--hp-ink-500);      /* secondary text */
  --fg-3:           var(--hp-ink-400);      /* tertiary, captions */
  --fg-on-brand:    #FFFFFF;
  --fg-on-inverse:  var(--hp-bone);
  --fg-link:        var(--hp-blue);

  --border-1:       var(--hp-ink-200);
  --border-2:       var(--hp-ink-100);
  --border-strong:  var(--hp-ink);

  --accent:         var(--hp-blue);
  --accent-hover:   var(--hp-blue-600);
  --accent-press:   var(--hp-blue-700);
  --accent-soft:    var(--hp-blue-50);

  --accent-2:       var(--hp-orange);       /* secondary accent — used sparingly */
  --accent-2-hover: var(--hp-orange-600);
  --accent-2-soft:  var(--hp-orange-bg);

  --success:        #2BA37A;
  --success-bg:     var(--hp-mint-bg);
  --warning:        #C68A0C;
  --warning-bg:     var(--hp-amber-bg);
  --danger:         #D63A24;
  --danger-bg:      #FFE6E1;

  /* ---------- TYPE FAMILIES ---------- */
  /* Two families: Manrope for display/headings, Inter for body. --font-sans is
     the body face; --font-display is Manrope. --font-serif is a legacy alias
     (no serif in the system) and maps to display. */
  --font-display:   'Manrope', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body:      'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-sans:      'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:     'Manrope', -apple-system, 'Helvetica Neue', Arial, sans-serif;  /* legacy alias → display */
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (modular, 1.25 ratio at body anchor 16) ---------- */
  --fs-12: 0.75rem;     /* 12 — micro labels, legal */
  --fs-13: 0.8125rem;   /* 13 — meta, eyebrow */
  --fs-14: 0.875rem;    /* 14 — UI body */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;    /* 18 — body-large */
  --fs-20: 1.25rem;     /* 20 — lead */
  --fs-24: 1.5rem;      /* 24 — h4 */
  --fs-32: 2rem;        /* 32 — h3 */
  --fs-44: 2.75rem;     /* 44 — h2 */
  --fs-60: 3.75rem;     /* 60 — h1 */
  --fs-84: 5.25rem;     /* 84 — display */
  --fs-128: 8rem;       /* 128 — hero display */

  --lh-tight:   1.05;  /* @kind other */
  --lh-snug:    1.15;  /* @kind other */
  --lh-normal:  1.4;   /* @kind other */
  --lh-relaxed: 1.55;  /* @kind other */

  --ls-tight:   -0.03em;   /* display + brand spec default (uniform across sizes) */
  --ls-snug:    -0.03em;   /* headings — spec keeps tracking uniform at -0.03em */
  --ls-normal:  -0.03em;   /* body — spec keeps tracking uniform at -0.03em */
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.12em;    /* uppercase labels — the one positive-tracking case */
  --tracking-tight: -0.03em;   /* spec alias */

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

  /* ---------- RADIUS — squared but not severe ---------- */
  --r-0:  0;         /* @kind spacing */
  --r-1:  2px;
  --r-2:  4px;
  --r-3:  6px;       /* default for buttons, inputs */
  --r-4:  8px;       /* cards */
  --r-5:  12px;      /* large surfaces */
  --r-6:  16px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(3, 21, 32, 0.06), 0 1px 1px rgba(3, 21, 32, 0.04);
  --shadow-2: 0 2px 4px rgba(3, 21, 32, 0.06), 0 4px 12px rgba(3, 21, 32, 0.06);
  --shadow-3: 0 8px 24px rgba(3, 21, 32, 0.08), 0 2px 6px rgba(3, 21, 32, 0.06);
  --shadow-4: 0 24px 48px rgba(3, 21, 32, 0.12), 0 8px 16px rgba(3, 21, 32, 0.08);
  --shadow-focus: 0 0 0 4px rgba(1, 4, 197, 0.22);
  --shadow-inset-border: inset 0 0 0 1px var(--hp-ink-200);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);    /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:    120ms;  /* @kind other */
  --dur-base:    200ms;  /* @kind other */
  --dur-slow:    420ms;  /* @kind other */

  /* ---------- LAYOUT ---------- */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1360px;
  --gutter:           24px;
}

/* ---------- DARK MODE ----------
   Dark page is the industrial dark blue, full strength. Brand blue stays the
   accent but lifts to a slightly lighter step so it doesn't vibrate on dark. */
[data-theme="dark"] {
  --bg-page:        var(--hp-ink);
  --bg-surface:     #082030;
  --bg-surface-2:   #0F2C40;
  --bg-inverse:     var(--hp-bone);

  --fg-1:           #ECEFF1;
  --fg-2:           #A5B4BD;
  --fg-3:           #6B7A82;
  --fg-on-inverse:  var(--hp-ink);
  --fg-link:        #5052E0;

  --border-1:       #1A3848;
  --border-2:       #122E3D;
  --border-strong:  #ECEFF1;

  --accent:         #5052E0;
  --accent-hover:   #6B6DEA;
  --accent-press:   var(--hp-blue);
  --accent-soft:    #0F2C40;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-4: 0 24px 48px rgba(0, 0, 0, 0.65);
  --shadow-inset-border: inset 0 0 0 1px var(--border-1);
}

/* ============================================================================
   SEMANTIC TYPE STYLES
   ----------------------------------------------------------------------------
   One family. Hierarchy is weight + size + tracking. No italic emphasis —
   use weight (300 / 700) or color (--accent / --fg-2) instead.
   ========================================================================== */

.hp-display {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, var(--fs-128));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
  color: var(--fg-1);
}

.hp-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, var(--fs-60));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
  color: var(--fg-1);
}

.hp-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, var(--fs-44));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: 700;
  color: var(--fg-1);
}

.hp-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: 600;
  color: var(--fg-1);
}

.hp-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: 600;
  color: var(--fg-1);
}

.hp-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.hp-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  color: var(--fg-2);
  text-wrap: pretty;
}

.hp-body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.hp-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.hp-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.hp-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.hp-quote {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: 400;
  color: var(--fg-1);
  text-wrap: balance;
}

/* ----------------------------------------------------------------------------
   BRAND SPECIMEN TOKENS
   The five named type styles exactly as defined in the Figma library. These
   are the canonical brand sizes (single-leading, -0.03em). For long-form
   running body, step line-height up to --lh-relaxed (use .hp-body instead).
   -------------------------------------------------------------------------- */
.title-pharma {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.5rem, 8vw, 7.5rem);   /* 120px */
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.headline-pharma {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 5.5vw, 4.375rem);  /* 70px */
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.subheadline-pharma {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.625rem);   /* 42px */
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.paragraph-pharma {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5625rem;   /* 25px */
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.small-paragraph-pharma {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;    /* 18px */
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* Two-tone headline device: one operative word in pharma-blue (light mode only). */
.hp-emph { color: var(--accent); }

/* ---------- BASE RESETS ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--fg-link); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); }
a:hover { opacity: 0.7; }