/* Baluarte Material Design v1.5 — foundations da identidade de família. */

:root {
  color-scheme: light;

  /* CAMADA 1 — PRIMITIVOS. */

  /* Neutros quentes — base acromática do sistema (não são cinzas puros) */
  --b-white: #ffffff;
  --b-black: #000000;
  --b-neutral-25:  #fdfcfc;
  --b-neutral-50:  #f9f8f7;
  --b-neutral-100: #f1f0ee;
  --b-neutral-150: #e9e8e6;
  --b-neutral-200: #e1e1e1;
  --b-neutral-250: #d3d2d1;
  --b-neutral-300: #cfcdcb;
  --b-neutral-400: #afa9a9;
  --b-neutral-500: #8f8f8f;
  --b-neutral-600: #5d5d5d;
  --b-neutral-700: #404040;
  --b-neutral-750: #383838;
  --b-neutral-800: #2c2c2b;
  --b-neutral-850: #202020;
  --b-neutral-900: #191919;
  --b-neutral-950: #0f0f0f;

  /* Vermelhos — perigo, erro e ações destrutivas. Nunca identidade institucional. */
  --b-red-50:  #fef2f2;
  --b-red-100: #f8d3da;
  --b-red-300: #ff8683;
  --b-red-500: #e02e2a;
  --b-red-600: #d00e17;
  --b-red-700: #b12320;

  /* Azuis — foco e informação */
  --b-blue-50:  #eaf3fe;
  --b-blue-100: #d2daf7;
  --b-blue-300: #4ea8fc;
  --b-blue-400: #339cff;
  --b-blue-500: #077efb;
  --b-blue-600: #2463c1;
  --b-blue-700: #0a4ea3;
  --b-indigo-500: #3e68ff;      /* foco e acento interativo */
  --b-indigo-600: #6366f1;      /* acento categórico/feature */

  /* Verdes — sucesso */
  --b-green-50:  #eafaf0;
  --b-green-100: #d4e9dd;
  --b-green-400: #22c55e;
  --b-green-600: #218838;
  --b-green-700: #15803d;
  --b-green-800: #166534;

  /* Âmbar — alerta */
  --b-amber-50:  #fdf6e3;
  --b-amber-100: #fbe2b7;
  --b-amber-400: #fbbc04;
  --b-amber-500: #f59e0b;
  --b-amber-700: #9a6700;
  --b-amber-800: #7c4a03;

  /* Categóricos — tags, dados e features. */
  --b-purple-500: #8b5cf6;
  --b-violet-500: #875be1;
  --b-pink-500:   #db167e;
  --b-pink-100:   #ffe1ef;
  --b-rose-500:   #d43670;
  --b-orange-500: #d9822b;
  --b-teal-500:   #1ba4da;
  --b-olive-500:  #84a132;
  --b-slate-500:  #64748b;

  /* Transparências primitivas — uso apenas por tokens semânticos. */
  --b-alpha-white-08: rgba(255, 255, 255, .08);
  --b-alpha-white-12: rgba(255, 255, 255, .12);
  --b-alpha-white-15: rgba(255, 255, 255, .15);
  --b-alpha-white-16: rgba(255, 255, 255, .16);
  --b-alpha-white-18: rgba(255, 255, 255, .18);
  --b-alpha-black-03: rgba(0, 0, 0, .03);
  --b-alpha-black-09: rgba(0, 0, 0, .09);
  --b-alpha-black-15: rgba(0, 0, 0, .15);
  --b-alpha-black-18: rgba(0, 0, 0, .18);
  --b-alpha-black-25: rgba(0, 0, 0, .25);
  --b-alpha-black-30: rgba(0, 0, 0, .30);
  --b-alpha-black-34: rgba(0, 0, 0, .34);
  --b-alpha-black-45: rgba(0, 0, 0, .45);
  --b-alpha-black-50: rgba(0, 0, 0, .50);
  --b-alpha-black-55: rgba(0, 0, 0, .55);
  --b-alpha-black-65: rgba(0, 0, 0, .65);

  /* Cores de terceiros (uso EXCLUSIVO em assets oficiais e escopo namespaced) */
  --b-vendor-google-blue:   #4285f4;
  --b-vendor-google-green:  #34a853;
  --b-vendor-google-yellow: #fbbc05;
  --b-vendor-google-red:    #ea4335;

  /* Tipografia (Noto Sans variável + multilíngue, com suporte multilíngue). */
  --b-font-sans: "Noto Sans", "Noto Sans Arabic", "Noto Sans JP",
    "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --b-font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --b-font-icons-regular: "Phosphor";
  --b-font-icons-strong: "Phosphor-Bold";
  --b-font-icons-fill: "Phosphor-Fill";

  /* Escala de tamanhos — densa por padrão, sem meios-pixels */
  --b-text-2xs: 11px;
  --b-text-xs:  12px;
  --b-text-sm:  13px;
  --b-text-md:  14px;   /* corpo padrão do núcleo */
  --b-text-lg:  15px;
  --b-text-xl:  16px;
  --b-text-2xl: 18px;
  --b-text-3xl: 20px;
  --b-text-4xl: 24px;
  --b-text-5xl: 28px;
  --b-text-6xl: 32px;
  --b-text-7xl: 40px;
  --b-text-8xl: 48px;
  --b-text-9xl: 64px;

  /* Pesos — displays estabilizam em 500; títulos usam 550 sem chegar a bold. */
  --b-weight-light:    370;
  --b-weight-regular:  400;
  --b-weight-body:     455;
  --b-weight-medium:   500;
  --b-weight-title:    550;
  --b-weight-semibold: 600;
  --b-weight-bold:     700;

  --b-leading-none:    1;
  --b-leading-display: 1.08;
  --b-leading-hero:    1.16;
  --b-leading-tight:   1.2;
  --b-leading-title-lg: 1.32;
  --b-leading-snug:    1.35;
  --b-leading-normal:  1.5;
  --b-leading-relaxed: 1.7;

  /* Papéis fluidos: convergência compacta é permitida; inversão, não. */
  --b-type-display-2xl-size: clamp(var(--b-text-6xl), 5vw, var(--b-text-9xl));
  --b-type-display-xl-size: clamp(var(--b-text-6xl), 4vw, var(--b-text-8xl));
  --b-type-display-lg-size: clamp(var(--b-text-5xl), 3.333vw, var(--b-text-7xl));
  --b-type-display-size: clamp(var(--b-text-5xl), 2.5vw, var(--b-text-6xl));

  /* Tipografia de marca — escala própria, sem herdar densidade de títulos ou corpo. */
  --b-brand-name-size: 18px;
  --b-brand-descriptor-size: 14px;
  --b-brand-weight: 500;
  --b-brand-name-leading: 22px;
  --b-brand-descriptor-leading: 20px;
  --b-brand-tracking: -.01em;

  /* Espaçamento — base-2 até 12, base-4 acima (ritmo denso real). */
  --b-space-1:  2px;
  --b-space-2:  4px;
  --b-space-3:  6px;
  --b-space-4:  8px;
  --b-space-5:  10px;
  --b-space-6:  12px;
  --b-space-7:  16px;
  --b-space-8:  20px;
  --b-space-9:  24px;
  --b-space-10: 32px;
  --b-space-11: 40px;
  --b-space-12: 48px;
  --b-space-13: 64px;

  /* Menu lateral — geometria herdada; 7px é inset de componente, não degrau da escala. */
  --b-nav-frame-expanded: 260px;
  --b-nav-frame-collapsed: 49px;
  --b-nav-frame-collapsed-coarse: 49px;
  --b-nav-collapsed-surface: 36px;
  --b-nav-collapsed-surface-coarse: 44px;
  --b-nav-collapsed-inset: 6px;
  --b-nav-collapsed-inset-coarse: 2px;
  --b-nav-frame-padding-start: 7px;
  --b-nav-frame-padding-end: 6px;
  --b-nav-item-block: 36px;
  --b-nav-section-gap: 20px;
  --b-nav-title-gap: var(--b-nav-section-gap);
  --b-nav-title-inset: 10px;
  --b-nav-title-control-block: 24px;
  --b-nav-title-content-gap: 10px;
  --b-nav-section-heading-block: 34px;
  --b-nav-collection-title-block: 48px;
  --b-nav-header-block: 55px;
  --b-nav-footer-block: 60px;
  --b-nav-section-content-size: 1000px;

  /* Shape — escala curta de fallback, curva e papéis semânticos. */
  --b-radius-xs:   4px;
  --b-radius-md:   8px;    /* campos e superfícies compactas */
  --b-radius-xl:   12px;
  --b-radius-2xl:  16px;
  --b-radius-3xl:  24px;
  --b-radius-pill: 999px;
  --b-radius-circle: 50%;
  --b-corner-rounded: round;
  --b-corner-squircle: squircle;
  --b-shape-control-compact-radius: 8px;
  --b-shape-navigation-radius: var(--b-radius-2xl);
  --b-shape-menu-item-radius: var(--b-radius-3xl);
  --b-shape-control-radius: 12px;
  --b-shape-control-large-radius: 16px;
  --b-shape-interactive-radius: 16px;
  --b-shape-composer-radius: 24px;

  /* Motion — rápido, discreto e reduzível. */
  --b-motion-instant: 70ms;
  --b-motion-fast:    120ms;   /* micro-interações, hover e foco */
  --b-motion-base:    160ms;   /* transições comuns */
  --b-motion-gentle:  220ms;   /* painéis, menus */
  --b-motion-slow:    300ms;   /* modais, canvas */
  /* `ease` é o padrão do núcleo; a curva enfatizada fica reservada a movimentos maiores. */
  --b-ease-standard:   ease;
  --b-ease-emphasized: cubic-bezier(.4, 0, .2, 1);
  --b-ease-decelerate: cubic-bezier(0, 0, .2, 1);
  --b-ease-accelerate: cubic-bezier(.4, 0, 1, 1);

  /* Gaussian — vidro funcional para superfícies sticky, sem substituir elevação. */
  --b-effect-gaussian-blur: 20px;
  --b-effect-gaussian-saturation: 1.12;

  /* Z-index nomeado. */
  --b-z-base: 0;
  --b-z-dropdown: 10;
  --b-z-sticky: 20;
  --b-z-overlay: 30;
  --b-z-modal: 40;
  --b-z-popover: 50;
  --b-z-toast: 60;

  /* Layout — contratos genéricos do núcleo. */
  --b-layout-reading: 720px;
  --b-layout-content: 1120px;
  --b-layout-wide: 1280px;
  --b-layout-gutter: clamp(16px, 3vw, 32px);
  --b-canvas-inline-wide: 46vi;
  --b-canvas-inline-sources: 30.6667vi; /* dois terços do canvas amplo */
  --b-canvas-inline-overlay: 100vi;
  --b-control-compact: 32px;
  --b-control-default: 40px;
  --b-control-touch: 44px;

  /* Iconografia — Phosphor local, com escala e pesos governados. */
  --b-icon-compact: 16px;
  --b-icon-default: 20px;
  --b-icon-large: 24px;
  --b-icon-display: 32px;
  --b-product-logo-size: var(--b-icon-display);
  --b-product-fallback-size: var(--b-icon-large);
  --b-navigation-perimeter-icon-size: var(--b-icon-default);
  --b-icon-stroke-regular: 16;
  --b-icon-stroke-strong: 24;

  /* Picker e Tabs — representação alinhada à navegação. */
  --b-picker-inline-size: 378px;
  --b-picker-header-block: 42px;
  --b-picker-panel-block: 320px;
  --b-picker-cell-size: 36px;
  --b-tab-indicator-block: 2px;

  /* Formatos de arquivo — cores categóricas, nunca estados semânticos. */
  --file-csv: #22c55e;
  --file-doc: #2563eb;
  --file-xls: #15803d;
  --file-ppt: #ea580c;
  --file-txt: #6b7280;
  --file-json: #f59e0b;
  --file-xml: #8b5cf6;
  --file-html: #d9480f;
  --file-image: #7c3aed;
  --file-audio: #be185d;
  --file-video: #6d28d9;
  --file-zip: #64748b;
  --file-code: #527a20;
  --file-pdf: #475569;
  --file-text: #1ba4da;

  /* CAMADA 2 — SEMÂNTICOS · TEMA CLARO (default). */

  
  --identity:      var(--b-neutral-950);  /* superfície institucional neutra */
  --on-identity:   var(--b-white);
  --logo:          var(--identity);       /* @deprecated: alias neutro; remova no próximo major */
  --b-brand-mark-filter: brightness(0);
  --action:        var(--b-neutral-800);  /* ação primária = neutra */
  --on-action:     var(--b-white);
  --action-hover:  var(--b-neutral-700);
  --accent:        var(--b-indigo-500);   /* interação, seleção e foco */
  --on-accent:     var(--b-white);
  --focus:         var(--accent);         /* @deprecated: alias de migração; use --accent */
/* Superfícies */
  --bg:               var(--b-white);
  --surface:          var(--b-neutral-50);
  --surface-2:        var(--b-neutral-100);
  --surface-3:        var(--b-neutral-150);
  --surface-hover:    var(--b-neutral-100);
  --surface-selected: color-mix(in srgb, var(--b-neutral-200) 58%, var(--b-neutral-150));
  --scrim:            var(--b-alpha-black-25);

  /* Conteúdo */
  --text:          var(--b-neutral-800);
  --text-muted:    var(--b-neutral-500);
  --text-subtle:   var(--b-neutral-600);
  --nav-section-title: var(--text-subtle);
  --text-disabled: var(--b-neutral-400);
  --text-inverse:  var(--b-neutral-100);

  /* Bordas */
  --border:        var(--b-neutral-200);
  --border-strong: var(--b-neutral-250);
  --divider:       var(--b-neutral-150);

  /* Scrollbar derivada da referência: track transparente e contraste progressivo. */
  --scrollbar-track: transparent;
  --scrollbar-thumb: #dfdfdf;
  --scrollbar-thumb-hover: #363b42;

  /* Código */
  --code-bg: var(--b-neutral-850);
  --code-text: var(--b-neutral-100);

  /* Status semântico — vermelho aparece somente em danger/erro/destruição */
  --info:       var(--b-blue-700);
  --info-bg:    var(--b-blue-50);
  --on-info:    var(--b-white);
  --success:    var(--b-green-800);
  --success-bg: var(--b-green-50);
  --on-success: var(--b-white);
  --danger:     var(--b-red-700);
  --danger-bg:  var(--b-red-50);
  --on-danger:  var(--b-white);
  
  --danger-action:       var(--b-red-500);
  --danger-action-hover: var(--b-red-700);
  --on-danger-action:    var(--b-white);
  --warning:    var(--b-amber-800);
  --warning-bg: var(--b-amber-50);
  --on-warning: var(--b-white);
  --link:       var(--b-blue-600);

  /* Elevação — 5 níveis destilados das ~20 sombras ad-hoc. */
  --elevation-1: 0 1px 3px var(--b-alpha-black-15);
  --elevation-2: 0 4px 12px var(--b-alpha-black-15);
  --elevation-3: 0 6px 24px var(--b-alpha-black-18);
  --elevation-4: 0 10px 36px var(--b-alpha-black-25);
  --elevation-5: 0 16px 56px var(--b-alpha-black-30);
  --elevation-portal: 0 18px 48px var(--b-alpha-black-09);

  /* Tokens de documentação e código; não são papéis de produto. */
  --code-action-bg: var(--b-alpha-white-08);
  --code-action-bg-hover: var(--b-alpha-white-15);
  --code-action-border: var(--b-alpha-white-18);
  --code-action-text: var(--b-neutral-150);
}

@media (hover: none) and (pointer: coarse) {
  :root {
    --b-nav-frame-collapsed: var(--b-nav-frame-collapsed-coarse);
    --b-nav-collapsed-surface: var(--b-nav-collapsed-surface-coarse);
    --b-nav-collapsed-inset: var(--b-nav-collapsed-inset-coarse);
  }
}

[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

/* TEMA ESCURO — só os SEMÂNTICOS trocam. */
/* Tema escuro automático completo quando data-theme não estiver definido. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  --identity:     var(--b-neutral-100);
  --b-brand-mark-filter: none;
  --on-identity:  var(--b-neutral-900);
  --logo:         var(--identity); /* @deprecated: alias neutro */
  --action:       var(--b-neutral-100);
  --on-action:    var(--b-neutral-900);
  --action-hover: var(--b-neutral-200);
  /* --accent permanece constante para previsibilidade. */

  --bg:               var(--b-neutral-900);
  --surface:          var(--b-neutral-850);
  --surface-2:        #272726;
  --surface-3:        #323231;
  --surface-hover:    #2c2c2c;
  --surface-selected: var(--b-neutral-750);
  --scrim:            var(--b-alpha-black-55);

  --text:          var(--b-neutral-100);
  --text-muted:    #9b9b9b;
  --text-subtle:   #9d9d9d;
  --text-disabled: #6b6b6b;
  --text-inverse:  var(--b-neutral-800);

  --border:        #2d2d2d;
  --border-strong: #4b4b4b;
  --divider:       #242424;

  --code-bg: var(--b-neutral-950);
  --code-text: var(--b-neutral-100);

  --info:       var(--b-blue-300);
  --info-bg:    #0d2a45;
  --on-info:    var(--b-neutral-900);
  --success:    var(--b-green-400);
  --success-bg: #11291b;
  --on-success: var(--b-neutral-900);
  --danger:     #f87171;
  --danger-bg:  #2a1414;
  --on-danger:  var(--b-neutral-900);
  --warning:    var(--b-amber-400);
  --warning-bg: #2a2210;
  --on-warning: var(--b-neutral-900);
  --link:       var(--b-blue-300);

  --elevation-1: 0 1px 3px var(--b-alpha-black-45);
  --elevation-2: 0 4px 12px var(--b-alpha-black-50);
  --elevation-3: 0 6px 24px var(--b-alpha-black-55);
  --elevation-4: 0 10px 36px var(--b-alpha-black-55);
  --elevation-5: 0 16px 56px var(--b-alpha-black-65);
  --elevation-portal: 0 22px 56px var(--b-alpha-black-34);
  --code-action-bg: var(--b-alpha-white-08);
  --code-action-bg-hover: var(--b-alpha-white-15);
  --code-action-border: var(--b-alpha-white-18);
  --code-action-text: var(--b-neutral-150);
  }
}

[data-theme="dark"] {
  --identity:     var(--b-neutral-100);
  --b-brand-mark-filter: none;
  --on-identity:  var(--b-neutral-900);
  --logo:         var(--identity); /* @deprecated: alias neutro */
  --action:       var(--b-neutral-100);
  --on-action:    var(--b-neutral-900);
  --action-hover: var(--b-neutral-200);
  /* --accent permanece constante para previsibilidade. */

  --bg:               var(--b-neutral-900);
  --surface:          var(--b-neutral-850);
  --surface-2:        #272726;
  --surface-3:        #323231;
  --surface-hover:    #2c2c2c;
  --surface-selected: var(--b-neutral-750);
  --scrim:            var(--b-alpha-black-55);

  --text:          var(--b-neutral-100);
  --text-muted:    #9b9b9b;
  --text-subtle:   #9d9d9d;
  --text-disabled: #6b6b6b;
  --text-inverse:  var(--b-neutral-800);

  --border:        #2d2d2d;
  --border-strong: #4b4b4b;
  --divider:       #242424;

  --code-bg: var(--b-neutral-950);
  --code-text: var(--b-neutral-100);

  --info:       var(--b-blue-300);
  --info-bg:    #0d2a45;
  --on-info:    var(--b-neutral-900);
  --success:    var(--b-green-400);
  --success-bg: #11291b;
  --on-success: var(--b-neutral-900);
  --danger:     #f87171;
  --danger-bg:  #2a1414;
  --on-danger:  var(--b-neutral-900);
  --warning:    var(--b-amber-400);
  --warning-bg: #2a2210;
  --on-warning: var(--b-neutral-900);
  --link:       var(--b-blue-300);

  --elevation-1: 0 1px 3px var(--b-alpha-black-45);
  --elevation-2: 0 4px 12px var(--b-alpha-black-50);
  --elevation-3: 0 6px 24px var(--b-alpha-black-55);
  --elevation-4: 0 10px 36px var(--b-alpha-black-55);
  --elevation-5: 0 16px 56px var(--b-alpha-black-65);
  --elevation-portal: 0 22px 56px var(--b-alpha-black-34);
  --code-action-bg: var(--b-alpha-white-08);
  --code-action-bg-hover: var(--b-alpha-white-15);
  --code-action-border: var(--b-alpha-white-18);
  --code-action-text: var(--b-neutral-150);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --scrollbar-track: transparent;
    --scrollbar-thumb: #393939;
    --scrollbar-thumb-hover: #9d9d9d;
  }
}
[data-theme="dark"] {
  --scrollbar-track: transparent;
  --scrollbar-thumb: #393939;
  --scrollbar-thumb-hover: #9d9d9d;
}

/* Scrollbar governada: track transparente, thumb discreto e contraste maior no hover/active. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--b-radius-pill);
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active { background-color: var(--scrollbar-thumb-hover); }
@media (forced-colors: active) {
  * { scrollbar-color: auto; }
}

/* HIERARQUIA TIPOGRÁFICA (uma classe = size + peso + leading + tracking + cor). */
.b-display-2xl { font-size: var(--b-type-display-2xl-size); font-weight: var(--b-weight-medium); line-height: var(--b-leading-display); letter-spacing: -.03em; color: var(--text); }
.b-display-xl  { font-size: var(--b-type-display-xl-size);  font-weight: var(--b-weight-medium); line-height: var(--b-leading-hero);    letter-spacing: -.03em; color: var(--text); }
.b-display-lg  { font-size: var(--b-type-display-lg-size);  font-weight: var(--b-weight-medium); line-height: var(--b-leading-hero);    letter-spacing: -.025em; color: var(--text); }
.b-display     { font-size: var(--b-type-display-size);     font-weight: var(--b-weight-medium); line-height: 1.18;                     letter-spacing: -.02em; color: var(--text); }
.b-headline    { font-size: var(--b-text-5xl); font-weight: var(--b-weight-medium); line-height: 1.25; letter-spacing: -.015em; color: var(--text); }
.b-title-lg    { font-size: var(--b-text-4xl); font-weight: var(--b-weight-title);  line-height: var(--b-leading-title-lg); letter-spacing: -.01em; color: var(--text); }
.b-title       { font-size: var(--b-text-3xl); font-weight: var(--b-weight-title);  line-height: var(--b-leading-snug); color: var(--text); }
.b-title-sm    { font-size: var(--b-text-2xl); font-weight: var(--b-weight-title);  line-height: var(--b-leading-snug); color: var(--text); }
.b-subtitle    { font-size: var(--b-text-xl);  font-weight: var(--b-weight-medium); line-height: var(--b-leading-normal); color: var(--text); }
.b-body-lg     { font-size: var(--b-text-lg);  font-weight: var(--b-weight-body); line-height: var(--b-leading-normal); color: var(--text); }
.b-body        { font-size: var(--b-text-md);  font-weight: var(--b-weight-body); line-height: var(--b-leading-normal); color: var(--text); }
.b-body-light  { font-size: var(--b-text-md);  font-weight: var(--b-weight-light); line-height: var(--b-leading-relaxed); color: var(--text); }
.b-body-sm     { font-size: var(--b-text-sm);  font-weight: var(--b-weight-body); line-height: var(--b-leading-normal); color: var(--text); }
.b-label       { font-size: var(--b-text-sm);  font-weight: var(--b-weight-medium); line-height: var(--b-leading-none); color: var(--text); }
.b-caption     { font-size: var(--b-text-xs);  font-weight: var(--b-weight-regular); line-height: var(--b-leading-normal); color: var(--text-muted); }
.b-overline    { font-size: var(--b-text-2xs); font-weight: var(--b-weight-semibold); line-height: var(--b-leading-normal); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.b-code        { font-family: var(--b-font-mono); font-size: var(--b-text-sm); line-height: var(--b-leading-normal); }

:where(.b-display-2xl, .b-display-xl, .b-display-lg, .b-display, .b-headline, .b-title-lg, .b-title, .b-title-sm) {
  font-optical-sizing: auto;
  font-synthesis: none;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

:where(:lang(ar), :lang(he), :lang(ja), :lang(ko), :lang(zh)):is(.b-display-2xl, .b-display-xl, .b-display-lg, .b-display) {
  line-height: var(--b-leading-tight);
  letter-spacing: normal;
}

/* LEI DO ALINHAMENTO VERTICAL (guia jul/2026 — obrigatória). */
.b-row {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-4);
}

.b-row > svg,
.b-row > img,
.b-row > .b-icon {
  flex: 0 0 auto;
}

.b-row-label {
  display: block;
  line-height: 1;              /* fallback aceitável */
  white-space: nowrap;
  overflow: visible;           /* nunca cortar descendentes/acentos */
}

@supports (text-box: trim-both cap alphabetic) {
  .b-row-label {
    text-box: trim-both cap alphabetic;
  }

  /* labels deliberadamente minúsculos */
  .b-row-label--lowercase {
    text-box: trim-both ex alphabetic;
  }
}

/* FOCO DE TECLADO (WCAG 2.4.7 — nunca remover sem substituto). */
.b-focusable:focus-visible,
.balu :is(a, button, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ICONOGRAFIA DE SISTEMA — Phosphor local, uma caixa e três fontes de desenho. */
.b-icon {
  --b-icon-size: var(--b-icon-default);
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--b-icon-size);
  block-size: var(--b-icon-size);
  flex: 0 0 var(--b-icon-size);
  overflow: visible;
  vertical-align: middle;
  font-size: var(--b-icon-size);
  line-height: 1;
  white-space: nowrap;
  direction: ltr;
  user-select: none;
}

.b-icon::before {
  display: block;
  inline-size: 1em;
  block-size: 1em;
  line-height: 1;
  text-align: center;
}

/* Icon slots own the target box; glyphs remain geometrically centered inside it. */
.b-icon-slot {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.b-icon-slot > .b-icon {
  place-self: center;
  margin: 0;
}

.b-icon--sm { --b-icon-size: var(--b-icon-compact); }
.b-icon--md { --b-icon-size: var(--b-icon-default); }
.b-icon--lg { --b-icon-size: var(--b-icon-large); }
.b-icon--xl { --b-icon-size: var(--b-icon-display); }

/* Variantes semânticas: as classes `ph-bold` e `ph-fill` carregam desenhos reais. */
.b-icon--strong { font-family: var(--b-font-icons-strong); }
.b-icon--fill,
.b-icon--selected { font-family: var(--b-font-icons-fill); }

/* Emoji uses the same optical box scale as system icons without becoming an action glyph. */
.b-emoji {
  --b-emoji-size: var(--b-icon-default);
  display: inline-grid;
  inline-size: var(--b-emoji-size);
  block-size: var(--b-emoji-size);
  flex: 0 0 var(--b-emoji-size);
  place-items: center;
  overflow: visible;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: var(--b-emoji-size);
  font-variant-emoji: emoji;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}
.b-emoji--sm { --b-emoji-size: var(--b-icon-compact); }
.b-emoji--md { --b-emoji-size: var(--b-icon-default); }
.b-emoji--lg { --b-emoji-size: var(--b-icon-large); }
.b-emoji--xl { --b-emoji-size: var(--b-icon-display); }

/* Marcas oficiais e marcas configuráveis não herdam a gramática de ícones do sistema. */
.b-brand-mark,
.b-agent-mark,
.b-file-mark {
  display: inline-grid;
  place-items: center;
  inline-size: var(--b-icon-large);
  block-size: var(--b-icon-large);
  flex: 0 0 var(--b-icon-large);
  overflow: hidden;
}

.b-brand-mark img,
.b-agent-mark img,
.b-file-mark img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.b-brand-mark img { filter: var(--b-brand-mark-filter); }
.b-brand-mark--display {
  inline-size: var(--b-icon-display);
  block-size: var(--b-icon-display);
  flex-basis: var(--b-icon-display);
}
.b-brand-mark--display img {
  max-inline-size: none;
  inline-size: 38px;
  block-size: 39px;
}
.b-brand-mark--on-light img { filter: brightness(0); }
.b-brand-mark--on-dark img { filter: none; }

/* Movimento reduzido — baseline da biblioteca, não apenas do portal. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}