/* ============================================
   Wego Design Foundation
   ============================================
   Source of truth: foundation.json

   QUICK REFERENCE
   ─────────────────────────────────────────────────────────────

   SURFACES
     --wp-bg-primary       page background (white / black)
     --wp-bg-secondary     subtle page tint (#FAFAFA / #121212)
     --wp-bg-tertiary      muted fill (#F4F4F4 / #323232)
     --wp-bg-surface       card / sheet background (white / #1D1D1D)
     --wp-bg-active        positive tint (green-tinted)
     --wp-bg-warning       warning tint (orange-tinted)
     --wp-bg-destructive   error tint (red-tinted)
     --wp-bg-exception     info tint (blue-tinted)
     --wp-bg-inverse       inverted surface (dark on light, light on dark)

   TEXT
     --wp-txt-primary      default body text
     --wp-txt-secondary    muted / supporting text
     --wp-txt-disabled     placeholder / disabled text
     --wp-txt-active-primary    green — positive emphasis
     --wp-txt-active-secondary  dark green — secondary positive
     --wp-txt-warning      orange warning text
     --wp-txt-destructive  red error text
     --wp-txt-link         blue link text
     --wp-txt-inverse      text on inverted/dark surfaces

   ICONS  (mirrors text — swap txt → ic)
     --wp-ic-primary / --wp-ic-secondary / --wp-ic-disabled
     --wp-ic-active-primary / --wp-ic-warning / --wp-ic-destructive / --wp-ic-link
     --wp-ic-highlight     amber star/rating icon (#FF9800)

   CTA (button backgrounds & fills)
     --wp-cta-primary      primary green button bg
     --wp-cta-primary-tap  pressed state (darker green)
     --wp-cta-secondary-tap ghost button pressed bg
     --wp-cta-disabled     disabled button bg (#DFDFDF / #323232)
     --wp-cta-destructive  red destructive button
     --wp-cta-optional     dark/light neutral button

   LINES & BORDERS
     --wp-line-inactive    default border (#DFDFDF / #565656)
     --wp-line-active      strong border (black / white)
     --wp-line-divider     hairline divider (#F4F4F4 / #323232)
     --wp-line-selected    focused / selected border (green)
     --wp-line-warning     warning border (orange)
     --wp-line-destructive error border (red)
     --wp-line-exception   info border (blue)
     --wp-line-subtle-*    soft tinted border variants (selected/warning/destructive/exception)
     --wp-line-cta-*       mirrors CTA tokens for button borders

   OVERLAYS
     --wp-ol-bg-top        dark scrim top (0.48 opacity)
     --wp-ol-bg-bottom     dark scrim bottom (0.75 opacity)
     --wp-ol-bg-blur       frosted glass (use with backdrop-filter)

   SHADOWS
     --dropshadow-8     subtle card shadow
     --dropshadow-16    medium hover/lift shadow
     --dropshadow-24    elevated panel shadow

   RADIUS
     --radius-xs   2px   tags, tight chips
     --radius-sm   4px   cards, inputs, buttons
     --radius-md   8px   sheets, panels
     --radius-lg   12px  bottom sheets, modals
     --radius-xl   16px  large cards
     --radius-2xl  20px  hero cards
     --radius-3xl  24px  extra-large panels
     --radius-full 999px pills, badges

   SPACING  (use --space-* for layout, not --measurement-*)
     --space-0-5 2px   --space-1  4px    --space-2  8px
     --space-3  12px   --space-4  16px   --space-5  20px
     --space-6  24px   --space-8  32px   --space-12 48px
     --space-16 64px   --space-24 96px

   TYPOGRAPHY
     Font: Inter only (--wp-font-headline and --wp-font-body both resolve to Inter)
     Never load or reference Roboto.
     Heading scale: h1 36/42·600  h2 30/36·600  h3 24/28·600  h4 20/24·600
     Title:  .title-{medium 16/20 | small 14/18 | xsmall 12/16}--{regular 400 | semibold 600 | bold 700}  (weight always explicit;  underline: add --underline modifier OR use the combined .title-{size}--{weight}-underline shorthand;  --caps xsmall only)
             component CSS: use --wp-text-title-{medium|small|xsmall}-{size|lh} tokens (single source) + explicit font-weight — don't hardcode title px
     Body:   .paragraph-medium 16/24·400  .paragraph-small 14/22·400  .paragraph-xsmall 12/20·400
     Caption: 10/12·400
     Price:  .price-{h3|h4|md|sm|xs}-{bold|semibold|regular}  +  .price-color-{primary|positive|warning|destructive|disabled}

   GRID
     --grid-columns 12 (desktop) → 8 (tablet) → 4 (mobile)   --grid-gutter 16px   --grid-mobile-margin 16px
     Breakpoints: ≥1168px → 1136px/12col  |  <1168px → 944px/12col  |  <976px → 704px/8col  |  <736px → fluid (100% - 32px)/4col
     Fixed container width per range; only <736px is fluid (100% minus 16px margin each side).
     .wrap = centered content wrapper (width: var(--grid-container), flush w/ header) — use this, NOT .container (which IS the responsive N-col grid)

   TRANSITIONS
     --transition   0.2s ease

   ─────────────────────────────────────────────────────────────
   USAGE RULES
   • Surfaces/text/icons: use semantic tokens, never raw hex
   • Spacing: always --space-*, never px literals in layout
   • --measurement-* is legacy — use --space-* instead
   • Dark mode: tokens auto-switch via :root[data-theme="dark"]
   • Link order: foundation.css → components.css
   ─────────────────────────────────────────────────────────────
*/

/* ============================================
   TOKENS — Light Mode (Default)
   ============================================ */
:root {
  /* ── Background Colors ── */
  --wp-bg-primary: #FFFFFF;
  --wp-bg-secondary: #FAFAFA;
  --wp-bg-tertiary: #F4F4F4;
  --wp-bg-surface: #FFFFFF;
  --wp-bg-active: #E7FDDC;
  --wp-bg-highlight: #FDF5CB;
  --wp-bg-warning: #FFF0E0;
  --wp-bg-destructive: #FFEEEE;
  --wp-bg-exception: #EBF5FF;
  --wp-bg-inverse: #1D1D1D;
  --wp-bg-inverse-still: #1D1D1D;
  --wp-bg-active-positive: #44B50C;
  --wp-bg-solid-positive: #188920;
  --wp-bg-solid-warning: #FF8000;
  --wp-bg-solid-destructive: #CF000F;
  --wp-bg-solid-exception: #016CD5;
  --wp-bg-inbetween: #BEF7A1;

  /* ── Text Colors ── */
  --wp-txt-primary: #1D1D1D;
  --wp-txt-primary-still: #1D1D1D;
  --wp-txt-secondary: #767676;
  --wp-txt-disabled: #BDBDBD;
  --wp-txt-active-primary: #44B50C;
  --wp-txt-active-secondary: #188920;
  --wp-txt-active-label: #188920;
  --wp-txt-warning: #D85D0D;
  --wp-txt-warning-inverse: #D85D0D;
  --wp-txt-destructive: #CF000F;
  --wp-txt-destructive-inverse: #CF000F;
  --wp-txt-inverse: #FFFFFF;
  --wp-txt-inverse-still: #FFFFFF;
  --wp-txt-link: #016CD5;
  --wp-txt-link-inverse: #016CD5;

  /* ── Icon Colors ── */
  --wp-ic-primary: #1D1D1D;
  --wp-ic-primary-still: #1D1D1D;
  --wp-ic-secondary: #767676;
  --wp-ic-disabled: #BDBDBD;
  --wp-ic-active-primary: #44B50C;
  --wp-ic-active-secondary: #188920;
  --wp-ic-active-label: #188920;
  --wp-ic-highlight: #FF9800;
  --wp-ic-warning: #D85D0D;
  --wp-ic-warning-inverse: #D85D0D;
  --wp-ic-destructive: #CF000F;
  --wp-ic-destructive-inverse: #CF000F;
  --wp-ic-inverse: #FFFFFF;
  --wp-ic-inverse-still: #FFFFFF;
  --wp-ic-link: #016CD5;
  --wp-ic-link-inverse: #016CD5;

  /* ── CTA Colors ── */
  --wp-cta-primary: #44B50C;
  --wp-cta-primary-tap: #188920;
  --wp-cta-secondary-tap: #E7FDDC;
  --wp-cta-disabled: #DFDFDF;
  --wp-cta-destructive: #DF3131;
  --wp-cta-destructive-tap: #CF000F;
  --wp-cta-optional: #1D1D1D;
  --wp-cta-optional-tap: #F4F4F4;
  --wp-cta-inverse: #FFFFFF;
  --wp-cta-inverse-still: #FFFFFF;

  /* ── Line Colors ── */
  --wp-line-active: #1D1D1D;
  --wp-line-inactive: #DFDFDF;
  --wp-line-divider: #F4F4F4;
  --wp-line-selected: #44B50C;
  --wp-line-highlight: #ECCD33;
  --wp-line-warning: #D85D0D;
  --wp-line-destructive: #DF3131;
  --wp-line-exception: #016CD5;
  --wp-line-subtle-selected: #BEF7A1;
  --wp-line-subtle-highlight: #F6E177;
  --wp-line-subtle-warning: #FFD4A8;
  --wp-line-subtle-destructive: #FFCDCD;
  --wp-line-subtle-exception: #C5E2FF;
  --wp-line-cta-primary: #44B50C;
  --wp-line-cta-primary-tap: #188920;
  --wp-line-cta-secondary-tap: #E7FDDC;
  --wp-line-cta-disabled: #DFDFDF;
  --wp-line-cta-destructive: #DF3131;
  --wp-line-cta-destructive-tap: #CF000F;
  --wp-line-cta-optional: #1D1D1D;
  --wp-line-cta-optional-tap: #F4F4F4;
  --wp-line-cta-inverse: #FFFFFF;
  --wp-line-cta-inverse-still: #FFFFFF;
  /* Gradient border tokens — from @wego/web-system (--wp-line-gradient*) */
  --wp-line-gradient: #BDBDBD;
  --wp-line-gradient-active: #9C9C9C;

  /* ── "Go" Brand Colors ──
     WegoPro / "Go" purple family. Sourced from @wego/web-system (--wp-go-*). */
  --wp-go-bg-primary: #532CCE;
  --wp-go-bg-secondary: #735CF7;
  --wp-go-bg-tertiary: #E5E6FD;
  --wp-go-txt-primary: #532CCE;

  /* ── Overlay Colors ── */
  --wp-ol-bg-top: rgba(29, 29, 29, 0.48);
  --wp-ol-bg-bottom: rgba(29, 29, 29, 0.75);
  --wp-ol-bg-blur: rgba(250, 250, 250, 0.6);

  /* ── Shadows ── */
  --dropshadow-8: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
  --dropshadow-16: 0 4px 16px 2px rgba(0, 0, 0, 0.08);
  --dropshadow-24: 0 8px 24px 2px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* ── Corner Radius ── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 999px;

  /* ── Measurement / Spacing ── */
  --measurement-xs: 2px;
  --measurement-sm: 4px;
  --measurement-md: 8px;
  --measurement-lg: 12px;
  --measurement-xl: 16px;
  --measurement-2xl: 20px;
  --measurement-3xl: 24px;

  /* ── Spacing Scale ── (--space-N where N = px ÷ 4; --space-0-5 is the 2px half-step) */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ── Grid ── */
  --grid-columns: 12;
  --grid-gutter: 16px;
  --grid-container: 1136px;   /* desktop large default */
  --grid-mobile-margin: 16px;

  /* ── Transitions ── */
  --transition: 0.2s ease;

  /* ── Font Families ──
     Fallback chain after Inter: 'SF Pro Text'/'SF Pro' (named, if the OS exposes it)
     → -apple-system / BlinkMacSystemFont (the Safari / Chrome keywords that resolve
     to SF Pro on macOS / iOS) → 'Segoe UI' (Windows) → system-ui / sans-serif — so
     text stays on-brand before Inter loads and native on every OS. (Never Roboto.) */
  --wp-font-headline: 'Inter', 'SF Pro Text', 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --wp-font-body: 'Inter', 'SF Pro Text', 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --wp-font-ios: 'SF Pro Text', 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ── Title type tokens ──
     Single source for the title scale's size + line-height. Both the .title-*
     utility classes AND component CSS reference these, so a size/lh change lands
     in one place. Weight stays an explicit longhand (400/600/700) at each call
     site so it reads clearly and never resets font-family. */
  --wp-text-title-medium-size: 16px;  --wp-text-title-medium-lh: 20px;
  --wp-text-title-small-size:  14px;  --wp-text-title-small-lh:  18px;
  --wp-text-title-xsmall-size: 12px;  --wp-text-title-xsmall-lh: 16px;
}

/* ============================================
   TOKENS — Dark Mode
   ============================================ */
:root[data-theme="dark"] {
  /* ── Background Colors ── */
  --wp-bg-primary: #000000;
  --wp-bg-secondary: #121212;
  --wp-bg-tertiary: #323232;
  --wp-bg-surface: #1D1D1D;
  --wp-bg-active: #203814;
  --wp-bg-highlight: #565656;
  --wp-bg-warning: #6F3A04;
  --wp-bg-destructive: #591D1D;
  --wp-bg-exception: #002E5B;
  --wp-bg-inverse: #FFFFFF;
  --wp-bg-inverse-still: #1D1D1D;
  --wp-bg-active-positive: #44B50C;
  --wp-bg-solid-positive: #188920;
  --wp-bg-solid-warning: #FF8000;
  --wp-bg-solid-destructive: #DF3131;
  --wp-bg-solid-exception: #016CD5;
  --wp-bg-inbetween: #BEF7A1;

  /* ── Text Colors ── */
  --wp-txt-primary: #FFFFFF;
  --wp-txt-primary-still: #1D1D1D;
  --wp-txt-secondary: #9C9C9C;
  --wp-txt-disabled: #565656;
  --wp-txt-active-primary: #44B50C;
  --wp-txt-active-secondary: #44B50C;
  --wp-txt-active-label: #FFFFFF;
  --wp-txt-warning: #FF8000;
  --wp-txt-warning-inverse: #FFFFFF;
  --wp-txt-destructive: #DF3131;
  --wp-txt-destructive-inverse: #FFFFFF;
  --wp-txt-inverse: #1D1D1D;
  --wp-txt-inverse-still: #FFFFFF;
  --wp-txt-link: #228DF6;
  --wp-txt-link-inverse: #FFFFFF;

  /* ── Icon Colors ── */
  --wp-ic-primary: #FFFFFF;
  --wp-ic-primary-still: #1D1D1D;
  --wp-ic-secondary: #9C9C9C;
  --wp-ic-disabled: #565656;
  --wp-ic-active-primary: #44B50C;
  --wp-ic-active-secondary: #44B50C;
  --wp-ic-active-label: #FFFFFF;
  --wp-ic-highlight: #FF9800;
  --wp-ic-warning: #FF8000;
  --wp-ic-warning-inverse: #FFFFFF;
  --wp-ic-destructive: #DF3131;
  --wp-ic-destructive-inverse: #FFFFFF;
  --wp-ic-inverse: #1D1D1D;
  --wp-ic-inverse-still: #FFFFFF;
  --wp-ic-link: #228DF6;
  --wp-ic-link-inverse: #FFFFFF;

  /* ── CTA Colors ── */
  --wp-cta-primary: #44B50C;
  --wp-cta-primary-tap: #188920;
  --wp-cta-secondary-tap: #203814;
  --wp-cta-disabled: #323232;
  --wp-cta-destructive: #DF3131;
  --wp-cta-destructive-tap: #CF000F;
  --wp-cta-optional: #FFFFFF;
  --wp-cta-optional-tap: #323232;
  --wp-cta-inverse: #1D1D1D;
  --wp-cta-inverse-still: #FFFFFF;

  /* ── Line Colors ── */
  --wp-line-active: #FFFFFF;
  --wp-line-inactive: #565656;
  --wp-line-divider: #323232;
  --wp-line-selected: #44B50C;
  --wp-line-highlight: #BDBDBD;
  --wp-line-warning: #FF8000;
  --wp-line-destructive: #DF3131;
  --wp-line-exception: #228DF6;
  --wp-line-subtle-selected: #188920;
  --wp-line-subtle-highlight: #9C9C9C;
  --wp-line-subtle-warning: #D85D0D;
  --wp-line-subtle-destructive: #CF000F;
  --wp-line-subtle-exception: #016CD5;
  --wp-line-cta-primary: #44B50C;
  --wp-line-cta-primary-tap: #188920;
  --wp-line-cta-secondary-tap: #203814;
  --wp-line-cta-disabled: #323232;
  --wp-line-cta-destructive: #DF3131;
  --wp-line-cta-destructive-tap: #CF000F;
  --wp-line-cta-optional: #FFFFFF;
  --wp-line-cta-optional-tap: #323232;
  --wp-line-cta-inverse: #1D1D1D;
  --wp-line-cta-inverse-still: #FFFFFF;
  /* Gradient border tokens — from @wego/web-system (--wp-line-gradient*) */
  --wp-line-gradient: #565656;
  --wp-line-gradient-active: #9C9C9C;

  /* ── "Go" Brand Colors ──
     WegoPro / "Go" purple family. Sourced from @wego/web-system (--wp-go-*). */
  --wp-go-bg-primary: #B0AFFD;
  --wp-go-bg-secondary: #CED0FC;
  --wp-go-bg-tertiary: #E5E6FD;
  --wp-go-txt-primary: #B0AFFD;

  /* ── Overlay Colors ── */
  --wp-ol-bg-top: rgba(0, 0, 0, 0.48);
  --wp-ol-bg-bottom: rgba(0, 0, 0, 0.75);
  --wp-ol-bg-blur: rgba(29, 29, 29, 0.6);

  /* ── Shadows ── */
  --dropshadow-8: 0 2px 8px 2px rgba(0, 0, 0, 0.3);
  --dropshadow-16: 0 4px 20px 2px rgba(0, 0, 0, 0.3);
  --dropshadow-24: 0 8px 32px 2px rgba(0, 0, 0, 0.3);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Headlines */
h1, h2, h3, h4, h5, h6,
.heading {
  font-family: var(--wp-font-headline);
  letter-spacing: -0.02em;
}

/* Body */
body,
.body-text {
  font-family: var(--wp-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--wp-txt-primary);
}

/* ── Heading Scale ── */
h1        { font-size: 36px; line-height: 42px; font-weight: 600; }
h2        { font-size: 30px; line-height: 36px; font-weight: 600; }
h3        { font-size: 24px; line-height: 28px; font-weight: 600; }
.h3-bold  { font-size: 24px; line-height: 28px; font-weight: 700; }
h4        { font-size: 20px; line-height: 24px; font-weight: 600; }
.h4-bold  { font-size: 20px; line-height: 24px; font-weight: 700; }

/* ── Title Scale ──
   Weight is ALWAYS stated explicitly: --regular (400), --semibold (600) or --bold (700).
   Add --underline for the underlined version (composes with any weight).
   --caps (uppercase + tracking) exists only at xsmall — for micro eyebrows/labels.
   There is no bare .title-{size} — always pick a weight modifier. */
.title-medium--semibold { font-size: var(--wp-text-title-medium-size); line-height: var(--wp-text-title-medium-lh); font-weight: 600; }
.title-small--semibold  { font-size: var(--wp-text-title-small-size);  line-height: var(--wp-text-title-small-lh);  font-weight: 600; }
.title-xsmall--semibold { font-size: var(--wp-text-title-xsmall-size); line-height: var(--wp-text-title-xsmall-lh); font-weight: 600; }
.title-medium--regular { font-size: var(--wp-text-title-medium-size); line-height: var(--wp-text-title-medium-lh); font-weight: 400; }
.title-small--regular  { font-size: var(--wp-text-title-small-size);  line-height: var(--wp-text-title-small-lh);  font-weight: 400; }
.title-xsmall--regular { font-size: var(--wp-text-title-xsmall-size); line-height: var(--wp-text-title-xsmall-lh); font-weight: 400; }
.title-medium--bold { font-size: var(--wp-text-title-medium-size); line-height: var(--wp-text-title-medium-lh); font-weight: 700; }
.title-small--bold  { font-size: var(--wp-text-title-small-size);  line-height: var(--wp-text-title-small-lh);  font-weight: 700; }
.title-xsmall--bold { font-size: var(--wp-text-title-xsmall-size); line-height: var(--wp-text-title-xsmall-lh); font-weight: 700; }
.title-medium--underline,
.title-small--underline,
.title-xsmall--underline { text-decoration: underline; text-underline-offset: 2px; }
/* Combined weight+underline shorthands — one class instead of composing two.
   e.g. .title-small--semibold-underline == .title-small--semibold .title-small--underline.
   The composable --underline modifier above still works; these are a convenience. */
.title-medium--regular-underline  { font-size: var(--wp-text-title-medium-size); line-height: var(--wp-text-title-medium-lh); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.title-medium--semibold-underline { font-size: var(--wp-text-title-medium-size); line-height: var(--wp-text-title-medium-lh); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.title-medium--bold-underline     { font-size: var(--wp-text-title-medium-size); line-height: var(--wp-text-title-medium-lh); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.title-small--regular-underline   { font-size: var(--wp-text-title-small-size);  line-height: var(--wp-text-title-small-lh);  font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.title-small--semibold-underline  { font-size: var(--wp-text-title-small-size);  line-height: var(--wp-text-title-small-lh);  font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.title-small--bold-underline      { font-size: var(--wp-text-title-small-size);  line-height: var(--wp-text-title-small-lh);  font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.title-xsmall--regular-underline  { font-size: var(--wp-text-title-xsmall-size); line-height: var(--wp-text-title-xsmall-lh); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.title-xsmall--semibold-underline { font-size: var(--wp-text-title-xsmall-size); line-height: var(--wp-text-title-xsmall-lh); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.title-xsmall--bold-underline     { font-size: var(--wp-text-title-xsmall-size); line-height: var(--wp-text-title-xsmall-lh); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.title-xsmall--caps { font-size: var(--wp-text-title-xsmall-size); line-height: var(--wp-text-title-xsmall-lh); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Paragraph Scale ── */
.paragraph-medium { font-size: 16px; line-height: 24px; font-weight: 400; }
.paragraph-small  { font-size: 14px; line-height: 22px; font-weight: 400; }
.paragraph-xsmall { font-size: 12px; line-height: 20px; font-weight: 400; }

/* ── Caption ── */
.caption { font-size: 10px; line-height: 12px; font-weight: 400; }

/* ── Price Format (from Figma 3719:13) ── */
.price-h3-bold      { font-family: var(--wp-font-headline); font-size: 24px; line-height: 28px; font-weight: 700; }
.price-h3-semibold  { font-family: var(--wp-font-headline); font-size: 24px; line-height: 28px; font-weight: 600; }
.price-h3-regular   { font-family: var(--wp-font-headline); font-size: 24px; line-height: 28px; font-weight: 400; }
.price-h4-bold      { font-family: var(--wp-font-headline); font-size: 20px; line-height: 24px; font-weight: 700; }
.price-h4-semibold  { font-family: var(--wp-font-headline); font-size: 20px; line-height: 24px; font-weight: 600; }
.price-h4-regular   { font-family: var(--wp-font-headline); font-size: 20px; line-height: 24px; font-weight: 400; }
.price-md-bold      { font-family: var(--wp-font-headline); font-size: 16px; line-height: 20px; font-weight: 700; }
.price-md-semibold  { font-family: var(--wp-font-headline); font-size: 16px; line-height: 20px; font-weight: 600; }
.price-md-regular   { font-family: var(--wp-font-headline); font-size: 16px; line-height: 20px; font-weight: 400; }
.price-sm-bold      { font-family: var(--wp-font-headline); font-size: 14px; line-height: 18px; font-weight: 700; }
.price-sm-semibold  { font-family: var(--wp-font-headline); font-size: 14px; line-height: 18px; font-weight: 600; }
.price-sm-regular   { font-family: var(--wp-font-headline); font-size: 14px; line-height: 18px; font-weight: 400; }
.price-xs-bold      { font-family: var(--wp-font-headline); font-size: 12px; line-height: 16px; font-weight: 700; }
.price-xs-semibold  { font-family: var(--wp-font-headline); font-size: 12px; line-height: 16px; font-weight: 600; }
.price-xs-regular   { font-family: var(--wp-font-headline); font-size: 12px; line-height: 16px; font-weight: 400; }

.price-color-primary      { color: var(--wp-txt-primary); }
.price-color-positive     { color: var(--wp-txt-active-secondary); }
.price-color-warning      { color: var(--wp-txt-warning); }
.price-color-destructive  { color: var(--wp-txt-destructive); }
.price-color-disabled     { color: var(--wp-txt-disabled); }

/* ── Legacy Type Scale ── */
.display  { font-family: var(--wp-font-headline); font-size: 2.5rem; font-weight: 800; line-height: 1.15; }
.small    { font-size: 0.875rem; font-weight: 400; line-height: 1.4; }

/* ============================================
   COMPONENT PATTERNS
   ============================================ */
/* NOTE: Button styles are in components.css */

/* Card */
.card {
  background: var(--wp-bg-surface);
  border: 1px solid var(--wp-line-inactive);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  box-shadow: var(--dropshadow-8);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dropshadow-24);
}

/* Badge / Tag */
.badge {
  display: inline-block;
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: 10px;
  line-height: 12px;
  font-weight: 500;
}
.badge-positive    { background: var(--wp-bg-active);      color: var(--wp-txt-active-primary); }
.badge-neutral     { background: var(--wp-bg-tertiary);    color: var(--wp-txt-secondary); }
.badge-warning     { background: var(--wp-bg-warning);     color: var(--wp-txt-warning); }
.badge-destructive { background: var(--wp-bg-destructive); color: var(--wp-txt-destructive); }
.badge-exception   { background: var(--wp-bg-exception);   color: var(--wp-txt-link); }

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--wp-line-divider);
  margin: var(--space-4) 0;
}

/* Overlay */
.overlay-top        { background: var(--wp-ol-bg-top); }
.overlay-bottom     { background: var(--wp-ol-bg-bottom); }
.overlay-blur       { background: var(--wp-ol-bg-blur);       backdrop-filter: blur(16px); }

/* ============================================
   ACCESSIBILITY
   ============================================ */

:focus-visible {
  outline: 2px solid var(--wp-cta-primary);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  button, a, input, select, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================
   RESPONSIVE GRID
   ============================================ */

.container {
  width: min(var(--grid-container), 100%);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

/* Centered content wrapper — flush with the header. Width is the FIXED
   --grid-container per breakpoint (1136 · 944 · 704), centered via margin:auto;
   at the smallest range (<736px) it goes fluid: 100% minus a 16px margin each
   side. The min(…, 100%) guard keeps it inside a parent narrower than the cap
   (e.g. a Storybook Docs preview) instead of overflowing/flex-shrinking oddly.
   Use this (NOT .container, the responsive N-col grid) for centered content.
   Mirrors the React library's .wp-wrap. */
.wrap {
  width: min(var(--grid-container), 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Desktop Large: >=1168px — container 1136px (fixed), 12 columns */
@media (min-width: 1168px) {
  :root { --grid-container: 1136px; --grid-columns: 12; }
}

/* Desktop Small: <1168px — container 944px (fixed), 12 columns */
@media (max-width: 1167px) {
  :root { --grid-container: 944px; --grid-columns: 12; }
}

/* Tablet: <976px — container 704px (fixed), 8 columns */
@media (max-width: 975px) {
  :root { --grid-container: 704px; --grid-columns: 8; }
}

/* Mobile: <736px — fluid (100% minus a 16px margin each side), 4 columns */
@media (max-width: 735px) {
  :root { --grid-container: calc(100% - 2 * var(--grid-mobile-margin)); --grid-columns: 4; }
}