/*
 * BTI Design System - Custom Properties (Design Tokens)
 * Source: Figma - 03. Visual BTI
 * Palette node: https://www.figma.com/design/WA9dnFkefxkSoOM1jKNG22/03.-Visual-BTI?node-id=227-1628
 * Home context: https://www.figma.com/design/WA9dnFkefxkSoOM1jKNG22/03.-Visual-BTI?node-id=862-1930
 *
 * RULE: All visual values in fragments and Client Extensions MUST reference a token.
 * No direct values (hex, hardcoded px) unless no equivalent token exists.
 * Canonical token definition source: /liferay/client-extensions/bti-theme-cx/frontend-token-definition.json
 * This file must stay aligned with that definition (defaults + css variable mappings).
 *
 * WCAG 2.1 AA compliance:
 * - Minimum contrast 4.5:1 for normal text (<18px regular or <14px bold).
 * - Minimum contrast 3:1 for large text (>=18px regular or >=14px bold).
 * - WCAG notes are included inline where a pairing is used in this file.
 */

/* ============================================================
   TYPOGRAPHY - Font Face declarations
   Fonts must be licensed and hosted by the project.
   These @font-face rules reference the font family names
   as detected in Figma. Replace src paths with actual font files.
   ============================================================ */

/*
@font-face {
  font-display: swap;
  font-family: 'Test Martina Plantijn';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/MartinaPlatijn-Regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Centra No1 TRIAL';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/CentraNo1-Book.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Stack Sans Text';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/StackSansText-Regular.woff2') format('woff2');
}
*/

:root {
  /* ==========================================================
     COLORS - Brand Primary
     Source: Full pallet / Background tokens
     ========================================================== */

  /* Primary Purple (brand dark background)
     WCAG: white (#FFFFFF) on this color => ~19:1 contrast. Passes AA and AAA. */
  --bti-color-brand-purple: #240822;

  /* Primary Pink (brand accent, CTAs)
     WCAG: white (#FFFFFF) on this color => ~4.2:1 contrast.
     Passes AA for large text (>=18px or bold >=14px). FAILS for normal-size text.
     Use --bti-color-content-high on pink backgrounds for small text. */
  --bti-color-brand-pink: #ba4e97;

  /* Primary brand light background (near-white) */
  --bti-color-brand-light: #fefdfc;

  /* Pure white / interactive surfaces */
  --bti-color-white: #ffffff;

  /* ==========================================================
     COLORS - Sub Brands BTI
     Source: Background/Sub Brands/*
     ========================================================== */

  /* BTI Academy & BTI Publishing */
  --bti-color-sub-academy-publishing: #ba4e97;

  /* BTI Implants
     WCAG: light color, use dark text (--bti-color-content-high) for contrast. */
  --bti-color-sub-implants: #ed96b8;

  /* BTI Sleep */
  --bti-color-sub-sleep: #46a28d;

  /* BTI Regenera */
  --bti-color-sub-regenera: #bab468;

  /* BTI Farma */
  --bti-color-sub-farma: #6567c1;

  /* BTI Studio */
  --bti-color-sub-studio: #999590;

  /* ==========================================================
     COLORS - Primary Purple Scale (0-100)
     Source: Full pallet/Purple/Primary Purple *
     ========================================================== */

  --bti-color-purple-0:   #ffffff;
  --bti-color-purple-10:  #fffbff;
  --bti-color-purple-20:  #fff6ff;
  --bti-color-purple-30:  #fce9fa;
  --bti-color-purple-40:  #f8dff4;
  --bti-color-purple-50:  #f3d7ef;
  --bti-color-purple-60:  #efcdea;
  --bti-color-purple-70:  #e9bfe3;
  --bti-color-purple-80:  #dfa6d7;
  --bti-color-purple-90:  #240822; /* Brand */
  --bti-color-purple-100: #190617;

  /* ==========================================================
     COLORS - Primary Pink Scale (0-100)
     Source: Full pallet/Pink/Primary Pink *
     ========================================================== */

  --bti-color-pink-0:   #ffffff;
  --bti-color-pink-10:  #fffcfe;
  --bti-color-pink-20:  #fef8fb;
  --bti-color-pink-30:  #fce9f5;
  --bti-color-pink-40:  #f8deec;
  --bti-color-pink-50:  #f1d2e4;
  --bti-color-pink-60:  #ebc1da;
  --bti-color-pink-70:  #e2b0cc;
  --bti-color-pink-80:  #d597be;
  --bti-color-pink-90:  #ba4e97; /* Brand */
  --bti-color-pink-100: #5b1e49;

  /* ==========================================================
     COLORS - Primary Sand Light Scale (10-100)
     Source: Full pallet/Sand Light/Primary Sand Light *
     ========================================================== */

  --bti-color-sand-10:  #fefdfc;
  --bti-color-sand-20:  #f7f6f4;
  --bti-color-sand-30:  #f2f1ed;
  --bti-color-sand-40:  #eae8e2;
  --bti-color-sand-50:  #e2e1da;
  --bti-color-sand-60:  #dad8d2;
  --bti-color-sand-70:  #bbb9b0;
  --bti-color-sand-80:  #75726a;
  --bti-color-sand-90:  #575449;
  --bti-color-sand-100: #24231f;

  /* ==========================================================
     COLORS - Secondary Greige (40, 70, 90)
     Source: Full pallet/Secondary Greige/*
     ========================================================== */

  --bti-color-greige-40: #dad7d0;
  --bti-color-greige-70: #949085;
  --bti-color-greige-90: #656059;

  /* ==========================================================
     COLORS - Content tokens
     Source: Content/Content *
     ========================================================== */

  /* Primary text - dark purple-toned near-black
     WCAG: on white (#FFFFFF) => ~18.8:1 contrast. Passes AA and AAA. */
  --bti-color-content-high: #1f0e21;

  /* Secondary text
     WCAG: on white (#FFFFFF) => ~7.2:1 contrast. Passes AA and AAA. */
  --bti-color-content-medium: #575449;

  /* Disabled text - do not use for interactive elements */
  --bti-color-content-disabled: #dad8d2;

  /* Inverse text (for dark backgrounds)
     WCAG: on --bti-color-brand-purple (#240822) => ~18.9:1 contrast. Passes AA and AAA. */
  --bti-color-content-inverse: #fefdfc;

  /* Secondary inverse text (for dark backgrounds) */
  --bti-color-content-inverse-low: #dedad3;

  /* ==========================================================
     COLORS - Interactive surface
     Source: Component Colors/Interactive/Surface/Default
     ========================================================== */

  --bti-color-surface-default: #ffffff;

  /* ==========================================================
     COLORS - Semantic / Feedback
     Source: Semantic/Background/* and Semantic/Content/*
     ========================================================== */

  /* Success */
  --bti-color-success-bg:      #d7f0e9;
  --bti-color-success:         #3e8e7e;
  --bti-color-success-dark:    #223a35;

  /* Information */
  --bti-color-info-bg:         #dbedf9;
  --bti-color-info:            #457b9d;
  --bti-color-info-dark:       #253f4f;

  /* Warning */
  --bti-color-warning-bg:      #fff2c7;
  --bti-color-warning:         #e3ba6c;
  --bti-color-warning-dark:    #463a21;

  /* Error */
  --bti-color-error-bg:        #ffdede;
  --bti-color-error:           #d3455b;
  --bti-color-error-dark:      #621c27;

  /* ==========================================================
     TYPOGRAPHY - Font Families
     Source: Figma - font families detected in inspection
     ========================================================== */

  /* Headlines, display text, large numbers */
  --bti-font-headline: 'Martina Plantijn', 'Test Martina Plantijn', Georgia, serif;

  /* Body copy, UI text, labels, captions */
  --bti-font-body: 'Centra No.1', 'Centra No1 TRIAL', system-ui, -apple-system, sans-serif;

  /* Small labels, chips, badges
     Stack Sans Text is pending font file availability in bti-theme/assets/fonts. */
  --bti-font-label: 'Centra No.1', 'Centra No1 TRIAL', system-ui, -apple-system, sans-serif;

  /* Clay compatibility aliases
     Keep these mapped to BTI tokens to avoid unresolved vars in Clay base rules. */
  --font-family-base: var(--bti-font-body);
  --font-family-sans-serif: var(--bti-font-body);
  --font-family-monospace: monospace;

  /* ==========================================================
     TYPOGRAPHY - Font Size & Line-height (Desktop defaults)
     Source: Figma - Desktop type scale
     Sizes expressed in px, mapped to rem at 1rem = 16px base.
     ========================================================== */

  /* Headlines */
  --bti-fs-headline-xl: 5rem;       /* 80px */
  --bti-lh-headline-xl: 5.125rem;   /* 82px */

  --bti-fs-headline-l: 3.5rem;      /* 56px */
  --bti-lh-headline-l: 4rem;        /* 64px */

  --bti-fs-headline-m: 2.5rem;      /* 40px */
  --bti-lh-headline-m: 2.75rem;     /* 44px */

  --bti-fs-headline-s: 2rem;        /* 32px */
  --bti-lh-headline-s: 2.5rem;      /* 40px */

  --bti-fs-headline-xs: 1.5rem;     /* 24px */
  --bti-lh-headline-xs: 1.875rem;   /* 30px */

  /* Titles */
  --bti-fs-title-l: 1.5rem;         /* 24px */
  --bti-lh-title-l: 2rem;           /* 32px */

  --bti-fs-title-m: 1.125rem;       /* 18px */
  --bti-lh-title-m: 1.625rem;       /* 26px */

  /* Body */
  --bti-fs-body-l: 1.125rem;        /* 18px */
  --bti-lh-body-l: 1.5rem;          /* 24px */

  --bti-fs-body-m: 1rem;            /* 16px */
  --bti-lh-body-m: 1.375rem;        /* 22px */

  --bti-fs-body-s: 0.875rem;        /* 14px */
  --bti-lh-body-s: 1.25rem;         /* 20px */

  --bti-fs-body-xs: 0.75rem;        /* 12px */
  --bti-lh-body-xs: 1rem;           /* 16px */

  /* Numbers / KPIs */
  --bti-fs-number-l: 7.5rem;        /* 120px */
  --bti-lh-number-l: 8rem;          /* 128px */

  /* ==========================================================
     TYPOGRAPHY - Font Weights
     Weights used in the BTI design system.
     ========================================================== */

  --bti-fw-regular:  400;   /* Martina Plantijn Regular / Centra No1 Book */
  --bti-fw-medium:   500;   /* Centra No1 Medium */
  --bti-fw-semibold: 600;   /* Centra No1 SemiBold */


  /* ==========================================================
     SPACING
     Source: Spacing/Component/* and Sizing/* tokens
     ========================================================== */

  --bti-spacing-1: 0.25rem;  /* 4px  - Spacing/Component/4-4 */
  --bti-spacing-2: 0.5rem;   /* 8px  - Spacing/Component/8-8 / Sizing/0100 */
  --bti-spacing-3: 0.75rem;  /* 12px - Spacing/Component/12-12 */

  /* Extended scale (pending confirmation in Figma layout tokens) */
  --bti-spacing-4: 1rem;     /* 16px */
  --bti-spacing-5: 1.5rem;   /* 24px */
  --bti-spacing-6: 2rem;     /* 32px */
  --bti-spacing-7: 2.5rem;   /* 40px */
  --bti-spacing-8: 3rem;     /* 48px */
  --bti-spacing-9: 4rem;     /* 64px */
  --bti-spacing-10: 5rem;    /* 80px */
  --bti-spacing-11: 7.5rem;  /* 120px */

  /* ==========================================================
     BORDERS & RADII
     Source: Border stroke / Border / Radius tokens
     ========================================================== */

  --bti-border-width: 1px;              /* Border stroke/border-stroke-01 */
  --bti-border-color: var(--bti-color-greige-40);
  --bti-border-focus-inverse: #dad8d2;  /* Border/Border Focus Inverse */
  --bti-border-style: solid;

  /* Pills, chips, badges - fully rounded */
  --bti-radius-round: 624.9375rem; /* 999px equivalent in rem */

  /* Component radii - pending confirmation in Figma component node */
  --bti-radius-xs: 0.25rem;   /* 4px  - cards small */
  --bti-radius-s: 0.5rem;     /* 8px  - cards standard */
  --bti-radius-m: 0.75rem;    /* 12px - modals, large cards */

  /* ==========================================================
     SHADOWS
     Pending: no shadow tokens detected in Figma palette node (227:1628).
     Confirm in component node (227:982) before adding values.
     ========================================================== */

  /* --bti-shadow-sm: pending; */
  /* --bti-shadow-md: pending; */
  /* --bti-shadow-lg: pending; */
}

/* ============================================================
   RESPONSIVE - Mobile type scale overrides
   Source: Figma - Mobile type scale
   Breakpoint: <=767px (standard Liferay mobile breakpoint)
   ============================================================ */

@media (max-width: 767px) {
  :root {
    /* Mobile Headlines */
    --bti-fs-headline-xl: 3rem;       /* 48px */
    --bti-lh-headline-xl: 3.5rem;     /* 56px */

    --bti-fs-headline-l: 2rem;        /* 32px */
    --bti-lh-headline-l: 2.5rem;      /* 40px */

    --bti-fs-headline-m: 1.5rem;      /* 24px */
    --bti-lh-headline-m: 2rem;        /* 32px */

    --bti-fs-headline-s: 1.25rem;     /* 20px */
    --bti-lh-headline-s: 1.75rem;     /* 28px */

    /* Mobile Titles */
    --bti-fs-title-l: 1.5rem;         /* 24px - same as desktop */
    --bti-lh-title-l: 2rem;           /* 32px - same as desktop */

    /* Mobile Body - same as desktop for M/S/XS */
    --bti-fs-body-m: 1rem;            /* 16px */
    --bti-lh-body-m: 1.5rem;          /* 24px */

    --bti-fs-body-s: 0.875rem;        /* 14px */
    --bti-lh-body-s: 1.375rem;        /* 22px */

    --bti-fs-body-xs: 0.75rem;        /* 12px */
    --bti-lh-body-xs: 1rem;           /* 16px */

    /* Mobile Numbers */
    --bti-fs-number-l: 4rem;          /* 64px - Mobile/Number/XL */
    --bti-lh-number-l: 4.5rem;        /* 72px */
  }
}
/*
 * BTI Theme CSS
 * Type: themeCSS (Liferay DXP 2025.Q1 LTS)
 *
 * This file consumes the design tokens defined in this same extension
 * (`assets/tokens.css`) as single source of truth.
 *
 * No hardcoded values. All visual properties reference var(--bti-*) tokens.
 *
 * WCAG 2.1 AA compliance:
 * - Normal text: minimum contrast 4.5:1.
 * - Large text (>=18px regular or >=14px bold): minimum contrast 3:1.
 * - Interactive focus indicators: minimum contrast 3:1 against adjacent colors.
 * - Pairings that require attention are noted inline.
 */


/* ============================================================
   TYPOGRAPHY - Font Face declarations
   Font files are served from this extension under static/fonts/.
   ============================================================ */

@font-face {
  font-display: swap;
  font-family: 'Martina Plantijn';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/martina-plantijn-light.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Martina Plantijn';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/martina-plantijn-light-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Martina Plantijn';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/martina-plantijn-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Centra No.1';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/CentraNo.1-Medium.woff2') format('woff2');
}

/* ============================================================
   BOX MODEL & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ============================================================
   DOCUMENT & BODY
   WCAG: --bti-color-content-high (#1F0E21) on white => ~18.8:1. Passes AA + AAA.
   ============================================================ */

html {
  font-size: 16px;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bti-color-white);
  color: var(--bti-color-content-high);
  font-family: var(--bti-font-body);
  font-size: var(--bti-fs-body-m);
  font-weight: var(--bti-fw-regular);
  line-height: var(--bti-lh-body-m);
  margin: 0;
  padding: 0;
}

/* ============================================================
   TYPOGRAPHY - Headings
   Font: Test Martina Plantijn (display/editorial)
   WCAG: --bti-color-content-high on white => ~18.8:1. Passes AA + AAA.
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--bti-color-content-high);
  font-family: var(--bti-font-headline);
  font-weight: var(--bti-fw-regular);
  margin-bottom: var(--bti-spacing-4);
  margin-top: 0;
}

h1 {
  font-size: var(--bti-fs-headline-xl);
  line-height: var(--bti-lh-headline-xl);
}

h2 {
  font-size: var(--bti-fs-headline-m);
  line-height: var(--bti-lh-headline-xl);
}

h3 {
  font-size: var(--bti-fs-headline-m);
  line-height: var(--bti-lh-headline-l);
}

h4 {
  font-size: var(--bti-fs-headline-s);
  line-height: var(--bti-lh-headline-m);
}

h5 {
  font-size: var(--bti-fs-headline-xs);
  line-height: var(--bti-lh-headline-s);
}

h6 {
  font-family: var(--bti-font-body);
  font-size: var(--bti-fs-title-l);
  font-weight: var(--bti-fw-semibold);
  line-height: var(--bti-lh-title-s);
}

/* ============================================================
   TYPOGRAPHY - HTML Web content headings
   ============================================================ */

.component-html h2 {
    font-size: var(--bti-fs-headline-s, 2rem);
    margin-top: 0;
    margin-bottom: var(--bti-spacing-5, 1.5rem);
    background: transparent;
}

.component-html h3 {
    font-size: var(--bti-fs-title-l, 1.5rem);
    margin-top: 0;
    margin-bottom: 12px;
}

/* ============================================================
   TYPOGRAPHY - Body text
   ============================================================ */

p {
  margin-bottom: var(--bti-spacing-4);
  margin-top: 0;
}

small,
.text-xs {
  font-size: var(--bti-fs-body-xs);
  line-height: var(--bti-lh-body-xs);
}

/* ============================================================
   LINKS
   WCAG: --bti-color-brand-pink (#BA4E97) on white => ~4.2:1.
   Passes AA for large text only. For inline body links, use
   underline decoration to supplement color distinction.
   WCAG: --bti-color-pink-100 (#5B1E49) on white => ~9.4:1. Passes AA + AAA.
   ============================================================ */

a {
  color: var(--bti-color-brand-pink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--bti-color-pink-100);
  text-decoration: underline;
}

a:focus-visible {
  border-radius: var(--bti-radius-xs);
  color: var(--bti-color-pink-100);
  outline: 2px solid var(--bti-color-brand-pink);
  outline-offset: 2px;
  text-decoration: none;
}

/* ============================================================
   SECTIONS - Dark (Purple Brand background)
   WCAG: --bti-color-content-inverse (#FEFDFC) on --bti-color-brand-purple (#240822)
         => ~18.9:1. Passes AA + AAA.
   ============================================================ */

.bti-section--dark {
  background-color: var(--bti-color-brand-purple);
  color: var(--bti-color-content-inverse);
}

.bti-section--dark h1,
.bti-section--dark h2,
.bti-section--dark h3,
.bti-section--dark h4,
.bti-section--dark h5,
.bti-section--dark h6 {
  color: var(--bti-color-content-inverse);
}

.bti-section--dark a {
  color: var(--bti-color-pink-60);
  text-decoration: underline;
}

.bti-section--dark a:hover {
  color: var(--bti-color-pink-40);
}

.bti-section--dark a:focus-visible {
  outline-color: var(--bti-border-focus-inverse);
}

/* WCAG: --bti-color-content-inverse-low (#DEDAD3) on --bti-color-brand-purple (#240822)
         => ~13.4:1. Passes AA + AAA. */
.bti-section--dark .bti-text--secondary {
  color: var(--bti-color-content-inverse-low);
}

/* ============================================================
   SECTIONS - Sand Light (warm neutral background)
   ============================================================ */

.bti-section--sand {
  background-color: var(--bti-color-sand-20);
  color: var(--bti-color-content-high);
}

.bti-section--sand-10 {
  background-color: var(--bti-color-sand-10);
  color: var(--bti-color-content-high);
}

/* ============================================================
   BUTTONS
   Primary: Brand Pink background with inverse text.
   WCAG: --bti-color-content-inverse (#FEFDFC) on --bti-color-brand-pink (#BA4E97)
         => ~4.2:1. Large text (>=18px regular or bold >=14px) PASSES AA.
         For button label text at 16px or smaller, see note below.
   NOTE: At 16px the contrast of white on pink is ~4.2:1, which is slightly
         below 4.5:1. The design system mandates this pairing for CTAs.
         To pass AA at 16px, the button label must use font-weight >= 600
         (bold), making it technically "large text" per WCAG criteria for
         bold text >= 14px (contrast threshold 3:1). Semibold at 14px passes.
         For standard 16px regular weight, consider adding a dark text
         variant override (--bti-color-content-high on pink) if required.
   ============================================================ */

.btn-primary,
.bti-btn--primary {
  background-color: var(--bti-color-brand-pink);
  border: var(--bti-border-width) var(--bti-border-style) var(--bti-color-brand-pink);
  border-radius: var(--bti-radius-round);
  color: var(--bti-color-content-inverse);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: var(--bti-font-body);
  font-size: var(--bti-fs-body-m);
  font-weight: var(--bti-fw-semibold);
  gap: var(--bti-spacing-2);
  line-height: var(--bti-lh-body-m);
  padding: var(--bti-spacing-3) var(--bti-spacing-5);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-primary:hover,
.bti-btn--primary:hover {
  background-color: var(--bti-color-pink-100);
  border-color: var(--bti-color-pink-100);
  color: var(--bti-color-content-inverse);
  text-decoration: none;
}

.btn-primary:focus-visible,
.bti-btn--primary:focus-visible {
  background-color: var(--bti-color-pink-100);
  border-color: var(--bti-color-pink-100);
  color: var(--bti-color-content-inverse);
  outline: 2px solid var(--bti-color-brand-purple);
  outline-offset: 2px;
}

.btn-primary:disabled,
.bti-btn--primary:disabled {
  background-color: var(--bti-color-content-disabled);
  border-color: var(--bti-color-content-disabled);
  color: var(--bti-color-greige-70);
  cursor: not-allowed;
}

/* Secondary button: outlined, dark */
.btn-secondary,
.bti-btn--secondary {
  background-color: transparent;
  border: var(--bti-border-width) var(--bti-border-style) var(--bti-color-brand-purple);
  border-radius: var(--bti-radius-round);
  color: var(--bti-color-brand-purple);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: var(--bti-font-body);
  font-size: var(--bti-fs-body-m);
  font-weight: var(--bti-fw-semibold);
  gap: var(--bti-spacing-2);
  line-height: var(--bti-lh-body-m);
  padding: var(--bti-spacing-3) var(--bti-spacing-5);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover,
.bti-btn--secondary:hover {
  background-color: var(--bti-color-brand-purple);
  color: var(--bti-color-content-inverse);
  text-decoration: none;
}

.btn-secondary:focus-visible,
.bti-btn--secondary:focus-visible {
  background-color: var(--bti-color-brand-purple);
  color: var(--bti-color-content-inverse);
  outline: 2px solid var(--bti-color-brand-pink);
  outline-offset: 2px;
}

/* Inverse secondary button (for dark backgrounds) */
.bti-btn--secondary-inverse {
  background-color: transparent;
  border: var(--bti-border-width) var(--bti-border-style) var(--bti-color-content-inverse);
  border-radius: var(--bti-radius-round);
  color: var(--bti-color-content-inverse);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: var(--bti-font-body);
  font-size: var(--bti-fs-body-m);
  font-weight: var(--bti-fw-semibold);
  gap: var(--bti-spacing-2);
  line-height: var(--bti-lh-body-m);
  padding: var(--bti-spacing-3) var(--bti-spacing-5);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bti-btn--secondary-inverse:hover {
  background-color: var(--bti-color-content-inverse);
  color: var(--bti-color-brand-purple);
  text-decoration: none;
}

.bti-btn--secondary-inverse:focus-visible {
  outline: 2px solid var(--bti-border-focus-inverse);
  outline-offset: 2px;
}

/* ============================================================
   PILLS / CHIPS / TAGS
   ============================================================ */

.bti-pill {
  background-color: var(--bti-color-sand-30);
  border-radius: var(--bti-radius-round);
  color: var(--bti-color-content-medium);
  display: inline-flex;
  align-items: center;
  font-family: var(--bti-font-label);
  font-size: var(--bti-fs-body-xs);
  font-weight: var(--bti-fw-regular);
  line-height: var(--bti-lh-body-xs);
  padding: var(--bti-spacing-1) var(--bti-spacing-3);
}

.bti-pill--brand {
  background-color: var(--bti-color-brand-purple);
  color: var(--bti-color-content-inverse);
}

/* ============================================================
   CONTAINERS & LAYOUT
   ============================================================ */

.container,
.container-fluid {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bti-spacing-5);
  padding-right: var(--bti-spacing-5);
  width: 100%;
}

.container {
  max-width: 90rem; /* 1440px */
}

/* ============================================================
   FEEDBACK - Alerts / Semantic messages
   ============================================================ */

.bti-alert {
  border-left: 4px solid;
  border-radius: var(--bti-radius-xs);
  padding: var(--bti-spacing-4) var(--bti-spacing-5);
}

/* WCAG: --bti-color-success-dark (#223A35) on --bti-color-success-bg (#D7F0E9)
         => ~7.8:1. Passes AA + AAA. */
.bti-alert--success {
  background-color: var(--bti-color-success-bg);
  border-color: var(--bti-color-success);
  color: var(--bti-color-success-dark);
}

/* WCAG: --bti-color-info-dark (#253F4F) on --bti-color-info-bg (#DBEDF9)
         => ~7.3:1. Passes AA + AAA. */
.bti-alert--info {
  background-color: var(--bti-color-info-bg);
  border-color: var(--bti-color-info);
  color: var(--bti-color-info-dark);
}

/* WCAG: --bti-color-warning-dark (#463A21) on --bti-color-warning-bg (#FFF2C7)
         => ~8.5:1. Passes AA + AAA. */
.bti-alert--warning {
  background-color: var(--bti-color-warning-bg);
  border-color: var(--bti-color-warning);
  color: var(--bti-color-warning-dark);
}

/* WCAG: --bti-color-error-dark (#621C27) on --bti-color-error-bg (#FFDEDE)
         => ~7.1:1. Passes AA + AAA. */
.bti-alert--error {
  background-color: var(--bti-color-error-bg);
  border-color: var(--bti-color-error);
  color: var(--bti-color-error-dark);
}

/* ============================================================
   DIVIDERS
   ============================================================ */

hr,
.bti-divider {
  background-color: var(--bti-color-greige-40);
  border: none;
  height: var(--bti-border-width);
  margin: var(--bti-spacing-6) 0;
}

/* ============================================================
   LISTS
   ============================================================ */

ul,
ol {
  padding-left: var(--bti-spacing-6);
}

li {
  margin-bottom: var(--bti-spacing-2);
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--bti-spacing-6);
}

.page-link {
  text-decoration: none;
}

.page-item.active .page-link {
  background-color: var(--bti-color-purple-20);
  color: inherit;
}

.page-item.active .page-link::before {
  background-color: var(--bti-color-brand-pink);
}

.pagination-items-per-page>a[aria-expanded=true],
.pagination-items-per-page>a.show,
.pagination-items-per-page>button[aria-expanded=true],
.pagination-items-per-page>button.show {
  background-color: var(--bti-color-purple-20);
}

.dropdown-item:hover, .dropdown-item.hover {
  background-color: var(--bti-color-purple-20);
}

/* ============================================================
   FORMS - Base
   WCAG: Focus ring must have 3:1 contrast against adjacent background.
   --bti-color-brand-pink on white => 3:1 border contrast. Acceptable.
   ============================================================ */

input,
select,
textarea {
  background-color: var(--bti-color-white);
  border: var(--bti-border-width) var(--bti-border-style) var(--bti-border-color);
  border-radius: var(--bti-radius-xs);
  color: var(--bti-color-content-high);
  font-family: var(--bti-font-body);
  font-size: var(--bti-fs-body-m);
  line-height: var(--bti-lh-body-m);
  padding: var(--bti-spacing-3) var(--bti-spacing-4);
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--bti-color-brand-pink);
  outline: 2px solid var(--bti-color-brand-pink);
  outline-offset: 1px;
}

input::placeholder,
textarea::placeholder {
  color: var(--bti-color-greige-70);
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--bti-color-sand-20);
  border-color: var(--bti-color-content-disabled);
  color: var(--bti-color-content-disabled);
  cursor: not-allowed;
}

label {
  color: var(--bti-color-content-high);
  display: block;
  font-family: var(--bti-font-body);
  font-size: var(--bti-fs-body-s);
  font-weight: var(--bti-fw-medium);
  line-height: var(--bti-lh-body-s);
  margin-bottom: var(--bti-spacing-2);
}

/* ============================================================
   IMAGES
   ============================================================ */

img,
video {
  display: block;
  height: auto;
  max-width: 100%;
}

/* ============================================================
   PRODUCT GALLERY
   ============================================================ */

.product-gallery .main-image {
    border: none;
    box-shadow: none;
}

.product-gallery .gallery-thumbnails>img,
.product-gallery .gallery-thumbnails>div {
    border: none;
    box-shadow: none;
}

.card-interactive-primary:active,
.card-interactive-primary.active,
.card-interactive:hover,
.card-interactive.hover {
    background-color: var(--bti-color-pink-20);
}

.card-interactive-primary:active::after,
.card-interactive-primary.active::after,
.card-interactive-primary:hover::after,
.card-interactive-primary.hover::after {
    background-color: var(--bti-color-brand-pink);
}

/* ============================================================
   KPI / DATA NUMBERS
   ============================================================ */

.bti-number {
  color: var(--bti-color-brand-purple);
  font-family: var(--bti-font-headline);
  font-size: var(--bti-fs-number-l);
  font-weight: var(--bti-fw-regular);
  line-height: var(--bti-lh-number-l);
}

/* ============================================================
   SUB BRAND ACCENT UTILITIES
   Each generates a background + accessible paired text color.
   ============================================================ */

.bti-brand--academy    { --bti-sub-accent: var(--bti-color-sub-academy-publishing); }
.bti-brand--implants   { --bti-sub-accent: var(--bti-color-sub-implants); }
.bti-brand--sleep      { --bti-sub-accent: var(--bti-color-sub-sleep); }
.bti-brand--regenera   { --bti-sub-accent: var(--bti-color-sub-regenera); }
.bti-brand--farma      { --bti-sub-accent: var(--bti-color-sub-farma); }
.bti-brand--studio     { --bti-sub-accent: var(--bti-color-sub-studio); }

/* ============================================================
   RESPONSIVE - Mobile breakpoint (<=767px)
   Typography is scaled via tokens.css :root overrides.
   Additional layout adjustments here.
   ============================================================ */

@media (max-width: 767px) {
  .container,
  .container-fluid {
    padding-left: var(--bti-spacing-4);
    padding-right: var(--bti-spacing-4);
  }
}

@media (max-width: 575px) {
  .bti-btn--primary,
  .bti-btn--secondary,
  .bti-btn--secondary-inverse {
    justify-content: center;
    width: 100%;
  }
}