/* 6G V2 design tokens. Components must consume these values instead of
   introducing local visual constants. */

body.ui-v2 {
  /* Brand and semantic colors */
  --ui-red: #b02028;
  --ui-red-hover: #971b22;
  --ui-red-dark: #7d171c;
  --ui-red-accent: #cd5157;
  --ui-red-text: #861920;
  --ui-red-border: #dda8ab;
  --ui-red-soft: #f5e5e6;
  --ui-red-pale: #fbf4f4;
  --ui-ink: #171717;
  --ui-muted: #666b70;
  --ui-line: rgba(35, 39, 40, 0.13);
  --ui-line-strong: rgba(35, 39, 40, 0.22);
  --ui-canvas: #f3f1ec;
  --ui-paper: rgba(255, 255, 255, 0.91);
  --ui-paper-solid: #fff;
  --ui-soft: #f4f4f1;
  --ui-teal: #1f5b5d;
  --ui-teal-soft: #e5efeb;
  --ui-success: #177249;
  --ui-warning: #92621e;
  --ui-empty: #b45309;
  --ui-danger: var(--ui-red-hover);

  /* Typography: the main steps follow the 10 / 16 / 26 / 42 / 68 ratio. */
  --ui-font-family: "Lato", sans-serif;
  --ui-type-micro: 10px;
  --ui-type-label: 12px;
  --ui-type-body: 16px;
  --ui-type-title: 26px;
  --ui-type-display: 42px;
  --ui-type-hero: 68px;
  --ui-type-fluid-title: clamp(22px, 3vw, var(--ui-type-title));
  --ui-type-fluid-display: clamp(28px, 4vw, var(--ui-type-display));
  --ui-type-fluid-hero: clamp(38px, 5.4vw, var(--ui-type-hero));

  /* Spacing */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
  --ui-space-7: 48px;

  /* Shape and control geometry */
  --ui-radius-xs: 9px;
  --ui-control-radius: 12px;
  --ui-radius-sm: var(--ui-control-radius);
  --ui-radius-md: 18px;
  --ui-window-radius: 26px;
  --ui-radius-lg: var(--ui-window-radius);
  --ui-radius-pill: 999px;
  --ui-control-height-sm: 40px;
  --ui-control-height-md: 44px;
  --ui-control-height-lg: 54px;

  /* Glass surfaces and elevation */
  --ui-glass-control: rgba(255, 255, 255, 0.78);
  --ui-glass-surface: rgba(255, 255, 255, 0.62);
  --ui-glass-strong: rgba(255, 255, 255, 0.91);
  --ui-glass-filter: blur(18px) saturate(118%);
  --ui-glass-filter-strong: blur(30px) saturate(135%);
  --ui-shadow-sm: 0 8px 24px rgba(31, 35, 36, 0.055);
  --ui-shadow-md: 0 22px 60px rgba(31, 35, 36, 0.09);
  --ui-shadow-brand: 0 9px 22px rgba(176, 32, 40, 0.16);
  --ui-shadow-brand-hover: 0 11px 25px rgba(125, 23, 28, 0.18);

  /* Interaction */
  --ui-motion-fast: 160ms;
  --ui-motion-base: 260ms;
  --ui-motion-slow: 320ms;
  --ui-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui-focus-ring: 0 0 0 3px rgba(31, 91, 93, 0.11);
  --ui-focus-outline: rgba(31, 91, 93, 0.22);
}