/*
 * Base Web — Colors & Typography
 * Source of truth: Uber Base Web tokens (MIT © Uber Technologies)
 *   - color primitives: src/tokens/color-primitive-tokens.ts
 *   - foundation colors (light): src/themes/light-theme/color-foundation-tokens.ts
 *   - semantic colors (light):   src/themes/light-theme/color-semantic-tokens.ts
 *   - typography:                src/themes/shared/typography.ts
 *   - borders, sizing, lighting: src/themes/shared/*
 *
 * Usage: link this file and use the CSS custom properties directly,
 * e.g. color: var(--bw-content-primary); background: var(--bw-background-primary);
 *
 * Font substitution note:
 * Base Web ships with "UberMove" and "UberMoveText" as the primary voice.
 * Those fonts are not open-licensed. We substitute with system-ui stack
 * exactly as Base Web itself falls back. If you have the real UberMove
 * files, drop them into /fonts and uncomment the @font-face blocks below.
 */

/* --- @font-face — real Uber fonts ---
 * Uber does not ship a separate UberMoveText file; we alias the primary
 * UberMove-Regular/Medium under BOTH 'UberMove' and 'UberMoveText' so
 * tokens like --bw-font-primary (UberMoveText) and --bw-font-secondary
 * (UberMove) both resolve. */
@font-face {
  font-family: 'UberMove';
  src: url('../fonts/UberMove-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'UberMove';
  src: url('../fonts/UberMove-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'UberMove';
  src: url('../fonts/UberMove-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'UberMove';
  src: url('../fonts/UberMove-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'UberMoveText';
  src: url('../fonts/UberMove-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'UberMoveText';
  src: url('../fonts/UberMove-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'UberMoveText';
  src: url('../fonts/UberMove-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'UberMoveMono';
  src: url('../fonts/UberMoveMono-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'UberMoveMono';
  src: url('../fonts/UberMoveMono-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* =================================================================
   * FONT STACKS (tokens)
   * Base Web puts body/UI text in the Text family and headings in Display.
   * ================================================================= */
  --bw-font-primary: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bw-font-secondary: UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bw-font-mono: UberMoveMono, "Lucida Console", Monaco, monospace;

  /* =================================================================
   * COLOR PRIMITIVES — Neutrals
   * ================================================================= */
  --bw-white: #FFFFFF;
  --bw-black: #000000;
  --bw-gray-50:  #F3F3F3;
  --bw-gray-100: #E8E8E8;
  --bw-gray-200: #DDDDDD;
  --bw-gray-300: #C6C6C6;
  --bw-gray-400: #A6A6A6;
  --bw-gray-500: #868686;
  --bw-gray-600: #727272;
  --bw-gray-700: #5E5E5E;
  --bw-gray-800: #4B4B4B;
  --bw-gray-900: #282828;

  /* COLOR PRIMITIVES — Red */
  --bw-red-50:  #FFF0EE;
  --bw-red-100: #FFE1DE;
  --bw-red-200: #FFD2CD;
  --bw-red-300: #FFB2AB;
  --bw-red-400: #FC7F79;
  --bw-red-500: #F83446;
  --bw-red-600: #DE1135;
  --bw-red-700: #BB032A;
  --bw-red-800: #950F22;
  --bw-red-900: #520810;

  /* Orange */
  --bw-orange-50:  #FFF0E9;
  --bw-orange-100: #FEE2D4;
  --bw-orange-200: #FFD3BC;
  --bw-orange-300: #FFB48C;
  --bw-orange-400: #FC823A;
  --bw-orange-500: #E65300;
  --bw-orange-600: #C54600;
  --bw-orange-700: #A33B04;
  --bw-orange-800: #823006;
  --bw-orange-900: #461A00;

  /* Amber */
  --bw-amber-50:  #FFF1E1;
  --bw-amber-100: #FFE4B7;
  --bw-amber-200: #FFD5A1;
  --bw-amber-300: #FFB749;
  --bw-amber-400: #DF9500;
  --bw-amber-500: #C46E00;
  --bw-amber-600: #A95F03;
  --bw-amber-700: #904A07;
  --bw-amber-800: #763A00;
  --bw-amber-900: #401E04;

  /* Yellow (brand accent for warnings) */
  --bw-yellow-50:  #FDF2DC;
  --bw-yellow-100: #FBE5B6;
  --bw-yellow-200: #FFD688;
  --bw-yellow-300: #F6BC2F;
  --bw-yellow-400: #D79900;
  --bw-yellow-500: #B97502;
  --bw-yellow-600: #9F6402;
  --bw-yellow-700: #845201;
  --bw-yellow-800: #6B4100;
  --bw-yellow-900: #392300;

  /* Lime */
  --bw-lime-50:  #EEF6E3;
  --bw-lime-100: #DEEEC6;
  --bw-lime-200: #CAE6A0;
  --bw-lime-300: #A6D467;
  --bw-lime-400: #77B71C;
  --bw-lime-500: #5B9500;
  --bw-lime-600: #4F7F06;
  --bw-lime-700: #3F6900;
  --bw-lime-800: #365310;
  --bw-lime-900: #1B2D00;

  /* Green (Uber Eats green at 400) */
  --bw-green-50:  #EAF6ED;
  --bw-green-100: #D3EFDA;
  --bw-green-200: #B1EAC2;
  --bw-green-300: #7FD99A;
  --bw-green-400: #06C167;
  --bw-green-500: #009A51;
  --bw-green-600: #0E8345;
  --bw-green-700: #166C3B;
  --bw-green-800: #0D572D;
  --bw-green-900: #002F14;

  /* Teal */
  --bw-teal-50:  #E2F8FB;
  --bw-teal-100: #CDEEF3;
  --bw-teal-200: #B0E7EF;
  --bw-teal-300: #77D5E3;
  --bw-teal-400: #01B8CA;
  --bw-teal-500: #0095A4;
  --bw-teal-600: #007F8C;
  --bw-teal-700: #016974;
  --bw-teal-800: #1A535A;
  --bw-teal-900: #002D33;

  /* Blue (brand default) */
  --bw-blue-50:  #EFF4FE;
  --bw-blue-100: #DEE9FE;
  --bw-blue-200: #CDDEFF;
  --bw-blue-300: #A9C9FF;
  --bw-blue-400: #6DAAFB;
  --bw-blue-500: #068BEE;
  --bw-blue-600: #276EF1;
  --bw-blue-700: #175BCC;
  --bw-blue-800: #1948A3;
  --bw-blue-900: #002661;

  /* Purple */
  --bw-purple-50:  #F9F1FF;
  --bw-purple-100: #F2E3FF;
  --bw-purple-200: #EBD5FF;
  --bw-purple-300: #DDB9FF;
  --bw-purple-400: #C490F9;
  --bw-purple-500: #A964F7;
  --bw-purple-600: #944DE7;
  --bw-purple-700: #7C3EC3;
  --bw-purple-800: #633495;
  --bw-purple-900: #3A1659;

  /* Magenta */
  --bw-magenta-50:  #FEEFF9;
  --bw-magenta-100: #FEDFF3;
  --bw-magenta-200: #FFCEF2;
  --bw-magenta-300: #FFACE5;
  --bw-magenta-400: #F877D2;
  --bw-magenta-500: #E142BC;
  --bw-magenta-600: #CA26A5;
  --bw-magenta-700: #A91A90;
  --bw-magenta-800: #891869;
  --bw-magenta-900: #50003F;

  /* =================================================================
   * FOUNDATION — primary mono ramp (light theme)
   * Note: Base Web intentionally uses a TRUE-BLACK primary ink.
   * ================================================================= */
  --bw-primary-a: #000000;   /* primary ink                       */
  --bw-primary-b: #FFFFFF;   /* primary surface                   */
  --bw-primary:   #000000;
  --bw-primary-50:  #F6F6F6;
  --bw-primary-100: #EEEEEE;
  --bw-primary-200: #E2E2E2;
  --bw-primary-300: #CBCBCB;
  --bw-primary-400: #AFAFAF;
  --bw-primary-500: #6B6B6B;
  --bw-primary-600: #545454;
  --bw-primary-700: #333333;

  --bw-mono-100:  #FFFFFF;
  --bw-mono-200:  #F6F6F6;
  --bw-mono-300:  #EEEEEE;
  --bw-mono-400:  #E2E2E2;
  --bw-mono-500:  #CBCBCB;
  --bw-mono-600:  #AFAFAF;
  --bw-mono-700:  #6B6B6B;
  --bw-mono-800:  #545454;
  --bw-mono-900:  #333333;
  --bw-mono-1000: #000000;

  /* FOUNDATION — accent (blue) */
  --bw-accent:     #276EF1;
  --bw-accent-50:  #EFF3FE;
  --bw-accent-100: #D4E2FC;
  --bw-accent-200: #A0BFF8;
  --bw-accent-300: #5B91F5;
  --bw-accent-400: #276EF1;
  --bw-accent-500: #1E54B7;
  --bw-accent-600: #174291;
  --bw-accent-700: #102C60;

  /* FOUNDATION — negative (red) */
  --bw-negative:     #DE1135;
  --bw-negative-50:  #FFEFED;
  --bw-negative-100: #FED7D2;
  --bw-negative-200: #F1998E;
  --bw-negative-300: #E85C4A;
  --bw-negative-400: #E11900;
  --bw-negative-500: #AB1300;
  --bw-negative-600: #870F00;
  --bw-negative-700: #5A0A00;

  /* FOUNDATION — warning (yellow) */
  --bw-warning:     #F6BC2F;
  --bw-warning-50:  #FFFAF0;
  --bw-warning-100: #FFF2D9;
  --bw-warning-200: #FFE3AC;
  --bw-warning-300: #FFCF70;
  --bw-warning-400: #FFC043;
  --bw-warning-500: #BC8B2C;
  --bw-warning-600: #996F00;
  --bw-warning-700: #674D1B;

  /* FOUNDATION — positive (green) */
  --bw-positive:     #0E8345;
  --bw-positive-50:  #E6F2ED;
  --bw-positive-100: #ADDEC9;
  --bw-positive-200: #66D19E;
  --bw-positive-300: #06C167;  /* Uber Eats green */
  --bw-positive-400: #048848;
  --bw-positive-500: #03703C;
  --bw-positive-600: #03582F;
  --bw-positive-700: #10462D;

  /* =================================================================
   * SEMANTIC — fg / bg / border (light theme)
   * These are the tokens product surfaces should actually use.
   * ================================================================= */
  /* backgrounds */
  --bw-background-primary:           #FFFFFF;
  --bw-background-secondary:         #F3F3F3;
  --bw-background-tertiary:          #E8E8E8;
  --bw-background-inverse-primary:   #000000;
  --bw-background-inverse-secondary: #282828;
  --bw-background-state-disabled:    #F3F3F3;
  --bw-background-overlay:           rgba(0,0,0,0.5);
  --bw-background-accent:            var(--bw-accent);
  --bw-background-accent-light:      var(--bw-blue-50);
  --bw-background-negative:          var(--bw-negative);
  --bw-background-negative-light:    var(--bw-red-50);
  --bw-background-warning:           var(--bw-warning);
  --bw-background-warning-light:     var(--bw-yellow-50);
  --bw-background-positive:          var(--bw-positive);
  --bw-background-positive-light:    var(--bw-green-50);
  --bw-background-always-dark:       #000000;
  --bw-background-always-light:      #FFFFFF;

  /* content (foreground) */
  --bw-content-primary:             #000000;
  --bw-content-secondary:           #4B4B4B;
  --bw-content-tertiary:            #5E5E5E;
  --bw-content-inverse-primary:     #FFFFFF;
  --bw-content-inverse-secondary:   #DDDDDD;
  --bw-content-inverse-tertiary:    #A6A6A6;
  --bw-content-state-disabled:      #A6A6A6;
  --bw-content-on-color:            #FFFFFF;
  --bw-content-on-color-inverse:    #000000;
  --bw-content-accent:              var(--bw-blue-600);
  --bw-content-negative:            var(--bw-red-600);
  --bw-content-warning:             var(--bw-yellow-600);
  --bw-content-positive:            var(--bw-green-600);

  /* border */
  --bw-border-opaque:             #F3F3F3;
  --bw-border-transparent:        rgba(0,0,0,0.08);
  --bw-border-selected:           #000000;
  --bw-border-inverse-opaque:     #4B4B4B;
  --bw-border-inverse-transparent:rgba(255,255,255,0.2);
  --bw-border-inverse-selected:   #FFFFFF;
  --bw-border-state-disabled:     #F3F3F3;
  --bw-border-accent:             var(--bw-blue-600);
  --bw-border-accent-light:       var(--bw-blue-300);
  --bw-border-negative:           var(--bw-red-600);
  --bw-border-negative-light:     var(--bw-red-300);
  --bw-border-warning:            var(--bw-yellow-600);
  --bw-border-warning-light:      var(--bw-yellow-200);
  --bw-border-positive:           var(--bw-green-600);
  --bw-border-positive-light:     var(--bw-green-300);

  /* interaction overlays */
  --bw-hover-overlay:              rgba(0,0,0,0.04);
  --bw-hover-overlay-inverse:      rgba(255,255,255,0.1);
  --bw-pressed-overlay:            rgba(0,0,0,0.08);
  --bw-pressed-overlay-inverse:    rgba(255,255,255,0.2);
  --bw-hover-negative:             rgba(222,17,53,0.1);
  --bw-pressed-negative:           rgba(222,17,53,0.15);

  /* =================================================================
   * SIZING / SPACING — Base Web "scale" system (4px base).
   * Always reference these instead of raw px.
   * ================================================================= */
  --bw-scale-0:    2px;
  --bw-scale-100:  4px;
  --bw-scale-200:  6px;
  --bw-scale-300:  8px;
  --bw-scale-400: 10px;
  --bw-scale-500: 12px;
  --bw-scale-550: 14px;
  --bw-scale-600: 16px;
  --bw-scale-650: 18px;
  --bw-scale-700: 20px;
  --bw-scale-750: 22px;
  --bw-scale-800: 24px;
  --bw-scale-850: 28px;
  --bw-scale-900: 32px;
  --bw-scale-950: 36px;
  --bw-scale-1000: 40px;
  --bw-scale-1200: 48px;
  --bw-scale-1400: 56px;
  --bw-scale-1600: 64px;
  --bw-scale-2400: 96px;
  --bw-scale-3200: 128px;
  --bw-scale-4800: 192px;

  /* =================================================================
   * BORDER RADII — componentised, not monolithic.
   * Base Web uses DIFFERENT radii for different components on purpose:
   * buttons/inputs are rounded, cards/modals are SQUARE, tags are pill.
   * ================================================================= */
  --bw-radius-100: 2px;
  --bw-radius-200: 4px;
  --bw-radius-300: 8px;
  --bw-radius-400: 12px;
  --bw-radius-500: 16px;
  --bw-radius-button:          8px;
  --bw-radius-button-mini:     4px;
  --bw-radius-checkbox:        0px;   /* square checkboxes — intentional */
  --bw-radius-input:           8px;
  --bw-radius-input-mini:      4px;
  --bw-radius-popover:         8px;
  --bw-radius-surface:         0px;   /* cards, modals, toasts — square */
  --bw-radius-tag:             24px;  /* pill */

  /* =================================================================
   * SHADOWS & OVERLAYS (lighting)
   * ================================================================= */
  --bw-shadow-400: 0 1px 4px  rgba(0,0,0,0.16);
  --bw-shadow-500: 0 2px 8px  rgba(0,0,0,0.16);
  --bw-shadow-600: 0 4px 16px rgba(0,0,0,0.16);
  --bw-shadow-700: 0 8px 24px rgba(0,0,0,0.16);
  --bw-shallow-below: 0px  4px 16px rgba(0,0,0,0.12);
  --bw-shallow-above: 0px -4px 16px rgba(0,0,0,0.12);
  --bw-deep-below:    0px 16px 48px rgba(0,0,0,0.22);
  --bw-deep-above:    0px -16px 48px rgba(0,0,0,0.22);

  /* =================================================================
   * ANIMATION — durations + curves
   * ================================================================= */
  --bw-timing-100: 100ms;
  --bw-timing-200: 200ms;
  --bw-timing-300: 300ms;
  --bw-timing-400: 400ms;
  --bw-timing-500: 500ms;
  --bw-ease-linear:      cubic-bezier(0, 0, 1, 1);
  --bw-ease-decelerate:  cubic-bezier(0.22, 1, 0.36, 1);   /* entering */
  --bw-ease-accelerate:  cubic-bezier(0.64, 0, 0.78, 0);   /* leaving  */
  --bw-ease-standard:    cubic-bezier(0.83, 0, 0.17, 1);   /* default  */

  /* =================================================================
   * BREAKPOINTS / GRID
   * ================================================================= */
  --bw-bp-small:  320px;
  --bw-bp-medium: 600px;
  --bw-bp-large:  1136px;
  --bw-grid-max:  1280px;

  /* =================================================================
   * TYPE — the 18 base sizes (font100..font1450).
   * Use as composites, e.g.
   *   font: var(--bw-font-weight-reg) var(--bw-font300-size)/var(--bw-font300-lh) var(--bw-font-primary);
   * ================================================================= */
  --bw-font-weight-reg:  400;
  --bw-font-weight-med:  500;
  --bw-font-weight-bold: 700;

  /* Paragraph / Label (Text family, 12–18) */
  --bw-font100-size:  12px; --bw-font100-lh:  20px; --bw-font100-weight: 400;
  --bw-font150-size:  12px; --bw-font150-lh:  16px; --bw-font150-weight: 500;
  --bw-font200-size:  14px; --bw-font200-lh:  20px; --bw-font200-weight: 400;
  --bw-font250-size:  14px; --bw-font250-lh:  16px; --bw-font250-weight: 500;
  --bw-font300-size:  16px; --bw-font300-lh:  24px; --bw-font300-weight: 400;
  --bw-font350-size:  16px; --bw-font350-lh:  20px; --bw-font350-weight: 500;
  --bw-font400-size:  18px; --bw-font400-lh:  28px; --bw-font400-weight: 400;
  --bw-font450-size:  18px; --bw-font450-lh:  24px; --bw-font450-weight: 500;

  /* Heading (Display family, 20–40, weight 700) */
  --bw-font550-size:  20px; --bw-font550-lh:  28px;
  --bw-font650-size:  24px; --bw-font650-lh:  32px;
  --bw-font750-size:  28px; --bw-font750-lh:  36px;
  --bw-font850-size:  32px; --bw-font850-lh:  40px;
  --bw-font950-size:  36px; --bw-font950-lh:  44px;
  --bw-font1050-size: 40px; --bw-font1050-lh: 52px;

  /* Display (Display family, 36–96, weight 700) */
  --bw-font1150-size: 36px; --bw-font1150-lh: 44px;
  --bw-font1250-size: 44px; --bw-font1250-lh: 52px;
  --bw-font1350-size: 52px; --bw-font1350-lh: 64px;
  --bw-font1450-size: 96px; --bw-font1450-lh: 112px;
}

/* =================================================================
 * SEMANTIC TEXT CLASSES
 * Drop these onto elements to apply Base Web's named styles.
 * ================================================================= */
.bw-ParagraphXSmall { font: 400 12px/20px var(--bw-font-primary); }
.bw-ParagraphSmall  { font: 400 14px/20px var(--bw-font-primary); }
.bw-ParagraphMedium { font: 400 16px/24px var(--bw-font-primary); }
.bw-ParagraphLarge  { font: 400 18px/28px var(--bw-font-primary); }

.bw-LabelXSmall { font: 500 12px/16px var(--bw-font-primary); }
.bw-LabelSmall  { font: 500 14px/16px var(--bw-font-primary); }
.bw-LabelMedium { font: 500 16px/20px var(--bw-font-primary); }
.bw-LabelLarge  { font: 500 18px/24px var(--bw-font-primary); }

.bw-HeadingXSmall  { font: 700 20px/28px var(--bw-font-secondary); letter-spacing: -0.01em; }
.bw-HeadingSmall   { font: 700 24px/32px var(--bw-font-secondary); letter-spacing: -0.01em; }
.bw-HeadingMedium  { font: 700 28px/36px var(--bw-font-secondary); letter-spacing: -0.01em; }
.bw-HeadingLarge   { font: 700 32px/40px var(--bw-font-secondary); letter-spacing: -0.02em; }
.bw-HeadingXLarge  { font: 700 36px/44px var(--bw-font-secondary); letter-spacing: -0.02em; }
.bw-HeadingXXLarge { font: 700 40px/52px var(--bw-font-secondary); letter-spacing: -0.02em; }

.bw-DisplayXSmall { font: 700 36px/44px  var(--bw-font-secondary); letter-spacing: -0.02em; }
.bw-DisplaySmall  { font: 700 44px/52px  var(--bw-font-secondary); letter-spacing: -0.02em; }
.bw-DisplayMedium { font: 700 52px/64px  var(--bw-font-secondary); letter-spacing: -0.03em; }
.bw-DisplayLarge  { font: 700 96px/112px var(--bw-font-secondary); letter-spacing: -0.03em; }

.bw-MonoParagraphSmall  { font: 400 14px/20px var(--bw-font-mono); }
.bw-MonoParagraphMedium { font: 400 16px/24px var(--bw-font-mono); }
.bw-MonoLabelSmall      { font: 500 14px/16px var(--bw-font-mono); }
.bw-MonoLabelMedium     { font: 500 16px/20px var(--bw-font-mono); }

/* =================================================================
 * SEMANTIC ELEMENT DEFAULTS (opt-in, scoped by .bw-type)
 * Applies Base Web's heading / body conventions inside any container
 * you add the .bw-type class to.
 * ================================================================= */
.bw-type {
  font: 400 16px/24px var(--bw-font-primary);
  color: var(--bw-content-primary);
  background: var(--bw-background-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bw-type h1 { font: 700 40px/52px  var(--bw-font-secondary); letter-spacing: -0.02em; margin: 0 0 var(--bw-scale-600); }
.bw-type h2 { font: 700 32px/40px  var(--bw-font-secondary); letter-spacing: -0.02em; margin: var(--bw-scale-1000) 0 var(--bw-scale-500); }
.bw-type h3 { font: 700 24px/32px  var(--bw-font-secondary); letter-spacing: -0.01em; margin: var(--bw-scale-900) 0 var(--bw-scale-400); }
.bw-type h4 { font: 700 20px/28px  var(--bw-font-secondary); letter-spacing: -0.01em; margin: var(--bw-scale-800) 0 var(--bw-scale-300); }
.bw-type h5 { font: 500 18px/24px  var(--bw-font-primary); margin: var(--bw-scale-700) 0 var(--bw-scale-300); }
.bw-type h6 { font: 500 16px/20px  var(--bw-font-primary); margin: var(--bw-scale-600) 0 var(--bw-scale-200); }
.bw-type p  { margin: 0 0 var(--bw-scale-600); }
.bw-type small { font-size: 12px; line-height: 16px; color: var(--bw-content-tertiary); }
.bw-type code, .bw-type kbd, .bw-type pre, .bw-type samp {
  font-family: var(--bw-font-mono);
  font-size: 14px;
  background: var(--bw-background-secondary);
  border-radius: var(--bw-radius-200);
  padding: 1px 4px;
}
.bw-type pre {
  padding: var(--bw-scale-600);
  border-radius: var(--bw-radius-300);
  overflow-x: auto;
  line-height: 20px;
}
.bw-type a {
  color: var(--bw-content-accent);
  text-decoration: none;
  transition: color var(--bw-timing-200) var(--bw-ease-linear);
}
.bw-type a:hover { text-decoration: underline; }
.bw-type a:focus-visible { outline: 3px solid var(--bw-accent); outline-offset: 3px; }

/* =================================================================
 * DARK THEME — opt-in with [data-theme="dark"] on any ancestor.
 * Only the semantic tokens swap; primitives stay stable.
 * ================================================================= */
[data-theme="dark"] {
  --bw-background-primary:         #161616;
  --bw-background-secondary:       #292929;
  --bw-background-tertiary:        #383838;
  --bw-background-inverse-primary: #C4C4C4;
  --bw-background-state-disabled:  #292929;
  --bw-background-overlay:         rgba(0,0,0,0.7);

  --bw-content-primary:           #DEDEDE;
  --bw-content-secondary:         #C4C4C4;
  --bw-content-tertiary:          #ABABAB;
  --bw-content-inverse-primary:   #000000;
  --bw-content-state-disabled:    #5D5D5D;

  --bw-border-opaque:             #292929;
  --bw-border-transparent:        rgba(255,255,255,0.08);
  --bw-border-selected:           #DEDEDE;

  --bw-hover-overlay:             rgba(255,255,255,0.1);
  --bw-pressed-overlay:           rgba(255,255,255,0.15);
}