/* ============================================================================
   SBCT LABS — DESIGN TOKENS  ·  single source of truth  (Ingredient Suite)
   ----------------------------------------------------------------------------
   Amber / bioscience-lab system: warm paper + deep ink, one amber signal.
   On LIGHT surfaces --accent is the accessible amber-bronze (legible as text);
   bright amber (--accent-on-dark / --signal) is reserved for fills & dark bands.
   Fraunces / Inter / IBM Plex Mono. Light + dark modes. Legacy aliases keep
   every existing page re-skinning with zero markup changes.
   ============================================================================ */

:root{
  /* ---- PRIMITIVE · warm paper → deep ink (LIGHT mode) ------------------- */
  --paper:        #FFFFFF;   /* base background — warm paper (matches site)  */
  --paper-2:      #F5F5F5;   /* warm panel                                   */
  --paper-3:      #ECECEC;   /* tonal fill / hover                           */
  --surface:      #FFFFFF;   /* cards / raised surfaces                      */
  --ink:          #13171D;   /* deep ink — text & dark bands                 */
  --ink-2:        #1A2028;   /* raised dark surface                          */
  --graphite:     #2A2F38;   /* strong body text                            */
  --grey:         #5C626A;   /* muted body                                  */
  --grey-2:       #767C84;   /* labels & meta                               */
  --grey-soft:    #9AA0A8;   /* faint decorative only                       */
  --hairline:     rgba(21,24,28,0.12);
  --hairline-2:   rgba(21,24,28,0.18);

  /* ---- ACCENT · amber-bronze (accessible on light) --------------------- */
  --accent:       #8A5A0F;   /* primary accent — links, emphasis, small fills*/
  --accent-deep:  #6E480C;   /* deep bands / pressed                        */
  --accent-hover: #A56C10;
  --accent-on-dark:#FFB93A;  /* bright amber, legible on ink                */
  --accent-tint:  rgba(255,184,41,0.10);
  --accent-line:  rgba(255,184,41,0.34);

  /* ---- SIGNAL · one vivid colour (bright amber) ------------------------ */
  --signal:       #FFB829;   /* CTAs, active filters, badges — dark text     */
  --signal-hover: #FFC44D;
  --signal-ink:   #1A1305;   /* dark text on amber signal                   */

  /* ---- FEATURE BAND · deep-ink surface (hero / feature / footer) -------- */
  --band:         #13171D;   /* deep ink band                               */
  --band-2:       #1A2028;   /* raised element on band                      */
  --on-band:      #F3F4F2;   /* text on band                               */
  --on-band-muted:rgba(243,244,242,0.62);
  --on-band-line: rgba(243,244,242,0.14);

  /* ---- TYPE ------------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-display:   clamp(48px, 7vw, 96px);
  --fs-h1:        clamp(40px, 6vw, 84px);
  --fs-h2:        clamp(30px, 3.6vw, 54px);
  --fs-h3:        22px;
  --fs-body:      16px;
  --fs-small:     13px;
  --fs-label:     11px;
  --lh-body:      1.75;
  --lh-tight:     1.05;
  --ls-tight:     -0.02em;
  --ls-label:     0.16em;

  /* ---- SPACING / RADIUS / ELEVATION ------------------------------------ */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px;
  --space-6:48px; --space-7:64px; --space-8:96px; --space-9:128px;
  --gutter:48px; --gutter-mobile:24px;
  --radius-sm:3px; --radius:8px; --radius-lg:14px;
  --shadow-card:0 24px 50px -30px rgba(19,23,29,0.28);

  /* ---- LEGACY ALIASES (do not add new usages) -------------------------- */
  --bg:var(--paper); --bg-warm:var(--paper-2); --white:var(--surface);
  --navy:var(--ink); --orange:var(--accent); --orange-text:var(--accent);
  --orange-deep:var(--accent-deep); --orange-on-navy:var(--accent-on-dark);
  --orange-muted:var(--accent-hover);
  --gray-200:var(--hairline-2); --gray-400:var(--grey-2); --gray-600:var(--grey);
  --text:var(--ink); --text-muted:var(--grey); --border:var(--hairline);
  --serif:var(--font-display); --sans:var(--font-sans); --mono:var(--font-mono);
}

/* ---- DARK MODE (deep-ink, bright amber) — system preference + toggle ---- */
:root[data-theme="dark"]{
  --paper:#13171D; --paper-2:#1A2028; --paper-3:#222A34; --surface:#1A2028;
  --ink:#F3F4F2; --ink-2:#E6E8E4; --graphite:#CDD2CB; --grey:#A7ADA5;
  --grey-2:#8A9088; --grey-soft:#6E746C;
  --hairline:rgba(243,244,242,0.13); --hairline-2:rgba(243,244,242,0.22);
  --accent:#FFB93A; --accent-deep:#FFB829; --accent-hover:#FFC96A;
  --accent-on-dark:#FFB93A; --accent-tint:rgba(255,185,58,0.12); --accent-line:rgba(255,185,58,0.34);
  --signal:#FFB829; --signal-hover:#FFC44D; --signal-ink:#1A1305;
  --band:#1A2028; --band-2:#222A34;
  --shadow-card:0 24px 50px -30px rgba(0,0,0,0.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#13171D; --paper-2:#1A2028; --paper-3:#222A34; --surface:#1A2028;
    --ink:#F3F4F2; --ink-2:#E6E8E4; --graphite:#CDD2CB; --grey:#A7ADA5;
    --grey-2:#8A9088; --grey-soft:#6E746C;
    --hairline:rgba(243,244,242,0.13); --hairline-2:rgba(243,244,242,0.22);
    --accent:#FFB93A; --accent-deep:#FFB829; --accent-hover:#FFC96A;
    --accent-on-dark:#FFB93A; --accent-tint:rgba(255,185,58,0.12); --accent-line:rgba(255,185,58,0.34);
    --signal:#FFB829; --signal-hover:#FFC44D; --signal-ink:#1A1305;
    --band:#1A2028; --band-2:#222A34;
    --shadow-card:0 24px 50px -30px rgba(0,0,0,0.6);
  }
}

h1,h2,h3,.t-display{ font-optical-sizing:auto; }
code, kbd{ font-variant-ligatures:none; }

/* ---- Product swatches → monochrome discipline -------------------------- */
.product-swatch{ background:var(--paper-2) !important; }
.product-swatch svg [stroke]{ stroke:var(--graphite) !important; }
.product-swatch svg [fill]:not([fill="none"]){ fill:var(--graphite) !important; }

/* ---- Labelled image placeholders --------------------------------------- */
.img-ph{ position:relative; background:var(--paper-2);
  border:1px dashed var(--hairline-2); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.img-ph .ph-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--grey-2); text-align:center; line-height:1.7; padding:20px; }
.img-ph .ph-kind{ display:block; font-size:8.5px; letter-spacing:1.6px; margin-bottom:6px; }
.img-ph.real .ph-kind{ color:var(--accent); }
.img-ph.ai .ph-kind{ color:var(--grey-soft); }
.img-ph::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, transparent 0 11px, rgba(127,127,127,0.04) 11px 12px); pointer-events:none; }
.media-band{ width:100%; }
.media-band .img-ph{ border-radius:0; border-left:none; border-right:none; aspect-ratio:32/9; }
@media(max-width:700px){ .media-band .img-ph{ aspect-ratio:16/10; } }