/* B.LAB design tokens — ported from the official design-system package that
   shipped with sir's ProWin design file. Token NAMES are kept identical to the
   system so the design's values translate one-to-one.

   House rules the system enforces, not suggests:
     · no shadows in any medium — elevation is border, tint and whitespace
     · no gradients in brand colour
     · platform colour identifies, it never ranks
     · 44px minimum touch target
     · figures are Inter with tabular numerals — Begum has none
     · no synthesised bold or italic: only the cuts declared below may be used

   Begum: only the two cuts the ProWin screens actually use are bundled —
   Medium 500 upright (.blab-h3) and Regular 400 italic (.blab-editorial and
   every pull quote). Inter is self-hosted in inter.css. */

@font-face {
  font-family: "Begum";
  src: url("fonts/Begum-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Begum";
  src: url("fonts/Begum-RegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* ---- parent ---- */
  --blab-navy:          #16234C;
  --blab-white:         #FFFFFF;
  --blab-bg:            #F0F2F9;
  --blab-border:        #E7EBF0;
  --blab-text-primary:  #231F20;
  --blab-text-muted:    #656A6F;
  --blab-accent:        #3E5EAB;

  /* ---- platform ground tints — identify a platform, never decorate ---- */
  --blab-agebiome:      #FDE5DC;
  --blab-neurobiome:    #FCE0F5;
  --blab-chronolift:    #D4EDFE;
  --blab-nutrilayer:    #D8F6E5;
  --blab-dermaai:       #E1E5E8;

  /* ---- semantic ---- */
  --blab-error:            #B3261E;
  --blab-error-surface:    #FBEAE9;
  --blab-success:          #0F5132;
  --blab-success-surface:  #E8F0EB;
  --blab-disabled-surface: #E7EBF0;
  --blab-disabled-text:    #8C939E;

  /* ---- interaction ---- */
  --blab-navy-hover:      #131F44;
  --blab-navy-active:     #101A3A;
  --blab-scrim:           rgba(22, 35, 76, .40);
  --blab-border-hover:    rgba(22, 35, 76, .20);
  --blab-secondary-hover: rgba(22, 35, 76, .05);
  --blab-focus-light:     #16234C;
  --blab-focus-dark:      #FFFFFF;

  /* ---- semantic aliases: components use these ---- */
  --surface-page:    var(--blab-bg);
  --surface-card:    var(--blab-white);
  --surface-inverse: var(--blab-navy);
  --text-body:       var(--blab-text-primary);
  --text-muted:      var(--blab-text-muted);
  --text-heading:    var(--blab-navy);
  --text-on-inverse: var(--blab-white);
  --text-link:       var(--blab-accent);
  --text-link-hover: var(--blab-navy);
  --border-default:  var(--blab-border);
  --focus-ring:      var(--blab-focus-light);

  /* ---- type ---- */
  --blab-font-editorial: "Begum", Georgia, serif;
  --blab-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --blab-size-h2: 2rem;        --blab-lh-h2: 1.25;  --blab-ls-h2: -0.01em;
  --blab-size-h3: 1.5rem;      --blab-lh-h3: 1.3;   --blab-ls-h3: -0.005em;
  --blab-size-editorial: 1.5rem; --blab-lh-editorial: 1.4; --blab-ls-editorial: -0.005em;
  --blab-size-eyebrow: 0.75rem;  --blab-lh-eyebrow: 1.4;  --blab-ls-eyebrow: 0.08em;
  --blab-size-subhead: 0.875rem; --blab-lh-subhead: 1.4;  --blab-ls-subhead: 0.02em;
  --blab-size-body: 1rem;        --blab-lh-body: 1.6;
  --blab-size-small: 0.875rem;   --blab-lh-small: 1.5;
  --blab-size-caption: 0.75rem;  --blab-lh-caption: 1.4; --blab-ls-caption: 0.01em;

  --blab-w-regular: 400;
  --blab-w-medium: 500;
  --blab-w-semibold: 600;

  /* ---- space, radius, layout ---- */
  --blab-space-1: 4px;  --blab-space-2: 8px;  --blab-space-3: 16px;
  --blab-space-4: 24px; --blab-space-5: 32px; --blab-space-6: 48px;
  --blab-radius-xs: 4px; --blab-radius-sm: 8px; --blab-radius-md: 16px; --blab-radius-lg: 24px;
  --blab-touch-min: 44px;
  --blab-header: 56px;
}

/* Reverse scope — navy grounds. Type is white; Accent Blue is never type here. */
.blab-on-navy {
  --surface-card:   var(--blab-navy);
  --text-body:      var(--blab-white);
  --text-heading:   var(--blab-white);
  --text-muted:     rgba(255, 255, 255, .72);
  --border-default: rgba(255, 255, 255, .24);
  --text-link:      var(--blab-white);
  --focus-ring:     var(--blab-focus-dark);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
/* our own display rules would otherwise beat the UA's [hidden] */
[hidden] { display: none !important; }
/* No shadows in any medium. */
* { box-shadow: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--blab-font-body);
  font-size: var(--blab-size-body);
  line-height: var(--blab-lh-body);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: .18em; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px;
}

/* Begum has no tabular figures. Every number in this app is Inter with tnum. */
.pw-num, table, th, td, .blab-figure, .blab-price {
  font-family: var(--blab-font-body);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; }

.blab-vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- typography ---------- */

.blab-h2, .blab-h3, .blab-editorial {
  font-family: var(--blab-font-editorial);
  color: var(--text-heading);
  margin: 0;
}
.blab-h2 { font-size: var(--blab-size-h2); line-height: var(--blab-lh-h2); letter-spacing: var(--blab-ls-h2); font-weight: 400; }
.blab-h3 { font-size: var(--blab-size-h3); line-height: var(--blab-lh-h3); letter-spacing: var(--blab-ls-h3); font-weight: 500; }

/* The editorial signature: Begum italic in Accent Blue on light grounds, white on navy. */
.blab-editorial {
  font-size: var(--blab-size-editorial);
  line-height: var(--blab-lh-editorial);
  letter-spacing: var(--blab-ls-editorial);
  font-style: italic; font-weight: 400;
  color: var(--blab-accent);
}
.blab-on-navy .blab-editorial { color: var(--blab-white); }

.blab-eyebrow {
  font-family: var(--blab-font-body); font-size: var(--blab-size-eyebrow);
  line-height: var(--blab-lh-eyebrow); letter-spacing: var(--blab-ls-eyebrow);
  font-weight: 600; text-transform: uppercase; margin: 0;
}
.blab-subhead {
  font-family: var(--blab-font-body); font-size: var(--blab-size-subhead);
  line-height: var(--blab-lh-subhead); letter-spacing: var(--blab-ls-subhead);
  font-weight: 600; margin: 0;
}
.blab-body  { font-size: var(--blab-size-body);  line-height: var(--blab-lh-body);  font-weight: 400; margin: 0; }
.blab-small { font-size: var(--blab-size-small); line-height: var(--blab-lh-small); font-weight: 400; margin: 0; }
.blab-caption {
  font-size: var(--blab-size-caption); line-height: var(--blab-lh-caption);
  letter-spacing: var(--blab-ls-caption); font-weight: 400; margin: 0;
}
.blab-muted { color: var(--text-muted); }