/* ==============================================================================
   Tachibana CSS - Bundle de Produção
   Design System Brutalista, Utilitário e Ortogonal
   ============================================================================== */

@layer reset, tokens, base, typography, layout, components, utilities;

/* ==============================================================================
   01-tokens.css - Variáveis Fundamentais do Design System Tachibana
   Camada: tokens | Restrição Cromática W3C Color 4, Anti-Halation & WCAG 2.1 AA
   ============================================================================== */

@layer tokens {
  :root {
    color-scheme: dark;

    /* Superfícies Industriais */
    --tc-bg-base: #0a0c10;
    --tc-bg-surface-1: #10141d;
    --tc-bg-surface-2: #161b26;
    --tc-bg-surface-3: #1d2433;
    --tc-bg-surface-hover: #222b3d;

    /* Divisores e Linhas Ortogonais de 1px */
    --tc-border-base: #232c3f;
    --tc-border-muted: #18202f;
    --tc-border-contrast: #374665;
    --tc-border-focus: #60a5fa;

    /* Contraste Textual em Conformidade com WCAG 2.1 AA (>= 4.5:1) */
    --tc-text-main: #f0f6fc;      /* Contraste 17.5:1 no fundo */
    --tc-text-muted: #a3b3c2;     /* Contraste 9.1:1 no fundo  */
    --tc-text-dim: #808c9c;       /* Contraste 5.7:1 no fundo (soluciona a falha de 2.59:1) */

    /* Cores Semânticas Desaturadas (Prevenção de Halation / Fadiga Visual) */
    --tc-amber: #e5a43b;
    --tc-amber-bg: color-mix(in srgb, var(--tc-amber) 12%, var(--tc-bg-surface-1));
    --tc-amber-border: color-mix(in srgb, var(--tc-amber) 40%, transparent);

    --tc-emerald: #34d399;
    --tc-emerald-bg: color-mix(in srgb, var(--tc-emerald) 12%, var(--tc-bg-surface-1));
    --tc-emerald-border: color-mix(in srgb, var(--tc-emerald) 40%, transparent);

    --tc-blue: #60a5fa;
    --tc-blue-bg: color-mix(in srgb, var(--tc-blue) 12%, var(--tc-bg-surface-1));
    --tc-blue-border: color-mix(in srgb, var(--tc-blue) 40%, transparent);

    --tc-red: #f87171;
    --tc-red-bg: color-mix(in srgb, var(--tc-red) 12%, var(--tc-bg-surface-1));
    --tc-red-border: color-mix(in srgb, var(--tc-red) 40%, transparent);

    --tc-cyan: #38bdf8;
    --tc-cyan-bg: color-mix(in srgb, var(--tc-cyan) 12%, var(--tc-bg-surface-1));
    --tc-cyan-border: color-mix(in srgb, var(--tc-cyan) 40%, transparent);

    /* Tipografia Híbrida */
    --tc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --tc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Geometria Rígida Estrita (Zero Border-Radius) */
    --tc-radius: 0px !important;

    /* Escala de Espaçamento Técnico */
    --tc-space-1: 4px;
    --tc-space-2: 8px;
    --tc-space-3: 12px;
    --tc-space-4: 16px;
    --tc-space-5: 20px;
    --tc-space-6: 24px;
    --tc-space-8: 32px;
  }
}
/* ==============================================================================
   02-reset.css - Reset Estrutural, Ortogonal e Acessibilidade
   Camada: reset | Anti-Padrão de IA: Zero Border-Radius Absoluto
   ============================================================================== */

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
  }

  html {
    font-size: 15px;
    background-color: var(--tc-bg-base);
    color: var(--tc-text-main);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: dark;
  }

  body {
    font-family: var(--tc-font-sans);
    line-height: 1.6;
    background-color: var(--tc-bg-base);
    color: var(--tc-text-main);
    min-height: 100vh;
  }

  /* Reset Universal de Mídias e Gráficos */
  img, svg, video, canvas, audio, iframe {
    display: block;
    max-width: 100%;
    height: auto;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border-radius: 0 !important;
  }

  /* Foco Acessível Padronizado (Navegação por Teclado WCAG 2.1 AA) */
  :focus-visible {
    outline: 2px solid var(--tc-border-focus);
    outline-offset: 2px;
  }

  ::selection {
    background-color: var(--tc-amber);
    color: #0a0c10;
  }

  /* Redução de Movimento Acessível */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
/* ==============================================================================
   03-typography.css - Tipografia Híbrida, Técnica, Fluida e Ergonômica
   Camada: typography | Sans-Serif Neutra + JetBrains Mono Rigorosa
   ============================================================================== */

@layer typography {
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--tc-font-sans);
    color: var(--tc-text-main);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
  }

  /* Escala Fluida Adaptativa via clamp() */
  h1 { font-size: clamp(1.65rem, 3.5vw, 2.15rem); }
  h2 { font-size: clamp(1.35rem, 2.5vw, 1.65rem); }
  h3 { font-size: clamp(1.15rem, 2.0vw, 1.40rem); }
  h4 { font-size: 1.05rem; }
  h5 { font-size: 0.92rem; }
  h6 { font-size: 0.80rem; text-transform: uppercase; letter-spacing: 0.05em; }

  p {
    color: var(--tc-text-main);
    margin-block-end: 0.95rem;
    line-height: 1.6;
  }

  p:last-child {
    margin-block-end: 0;
  }

  /* Classes de Tipografia Técnica */
  .tc-mono {
    font-family: var(--tc-font-mono);
    font-size: 0.85rem;
  }

  .tc-uppercase-label {
    font-family: var(--tc-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    color: var(--tc-text-muted);
  }

  .tc-text-dim {
    color: var(--tc-text-dim);
  }

  .tc-text-muted {
    color: var(--tc-text-muted);
  }

  .tc-text-amber {
    color: var(--tc-amber);
  }

  .tc-text-emerald {
    color: var(--tc-emerald);
  }

  .tc-text-blue {
    color: var(--tc-blue);
  }

  .tc-text-red {
    color: var(--tc-red);
  }

  .tc-text-cyan {
    color: var(--tc-cyan);
  }

  /* Código Inline */
  code {
    font-family: var(--tc-font-mono);
    font-size: 0.85rem;
    background-color: var(--tc-bg-surface-2);
    border: 1px solid var(--tc-border-base);
    padding-inline: 6px;
    padding-block: 2px;
    color: var(--tc-text-main);
  }
}
/* ==============================================================================
   04-layout.css - Grid, Espaçamento Utilitário e Proximidade Gestalt
   Camada: layout | Alta Densidade de Dados sem Sufocamento Estrutural
   ============================================================================== */

@layer layout {
  .tc-container {
    max-width: 1200px;
    margin-inline: auto;
    padding-block: 36px 64px;
    padding-inline: 24px;
  }

  .tc-container-wide {
    max-width: 1440px;
    margin-inline: auto;
    padding-block: 36px 64px;
    padding-inline: 24px;
  }

  .tc-grid-dense {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 20px;
    width: 100%;
  }

  .tc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .tc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .tc-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .tc-flex {
    display: flex;
  }

  .tc-flex-col {
    display: flex;
    flex-direction: column;
  }

  .tc-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tc-gap-1 { gap: var(--tc-space-1); }
  .tc-gap-2 { gap: var(--tc-space-2); }
  .tc-gap-3 { gap: var(--tc-space-3); }
  .tc-gap-4 { gap: var(--tc-space-4); }
  .tc-gap-5 { gap: var(--tc-space-5); }
  .tc-gap-6 { gap: var(--tc-space-6); }

  /* Divisores Rígidos */
  .tc-divider {
    border: 0;
    height: 1px;
    background-color: var(--tc-border-base);
    margin-block: 32px;
  }

  .tc-divider-dashed {
    border: 0;
    border-block-start: 1px dashed var(--tc-border-base);
    background: transparent;
    margin-block: 24px;
  }

  /* Painel com Borda Ortogonal e Espaçamento Gestalt */
  .tc-panel {
    background-color: var(--tc-bg-surface-1);
    border: 1px solid var(--tc-border-base);
    padding: 24px;
  }

  @media (max-width: 768px) {
    .tc-container, .tc-container-wide {
      padding-block: 24px 44px;
      padding-inline: 16px;
    }

    .tc-grid-2, .tc-grid-3, .tc-grid-4 {
      grid-template-columns: 1fr;
    }
  }
}
/* ==============================================================================
   05-components.css - Componentes Brutalistas e Utilitários com Alta Affordance
   Camada: components | Botões, Inputs, Badges Técnicos e Alertas WCAG 2.1 AA
   ============================================================================== */

@layer components {
  /* ==============================================================================
     Botões Ortogonais com Alta Affordance
     ============================================================================== */
  .tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-block: 8px;
    padding-inline: 16px;
    background-color: var(--tc-bg-surface-2);
    border: 1px solid var(--tc-border-contrast);
    color: var(--tc-text-main);
    font-family: var(--tc-font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
    user-select: none;
    white-space: nowrap;
  }

  .tc-btn:hover {
    background-color: var(--tc-bg-surface-hover);
    border-color: var(--tc-border-focus);
    filter: brightness(1.12);
  }

  .tc-btn:active {
    transform: translateY(1px);
    filter: brightness(0.95);
  }

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

  /* Botão Primário: Sólido com Alto Contraste (Ratio 9:1) */
  .tc-btn-primary {
    background-color: var(--tc-amber);
    border-color: var(--tc-amber);
    color: #0a0c10;
    font-weight: 600;
  }

  .tc-btn-primary:hover {
    background-color: color-mix(in srgb, var(--tc-amber) 88%, #ffffff);
    border-color: color-mix(in srgb, var(--tc-amber) 88%, #ffffff);
    filter: none;
  }

  .tc-btn-primary:active {
    background-color: color-mix(in srgb, var(--tc-amber) 88%, #000000);
    border-color: color-mix(in srgb, var(--tc-amber) 88%, #000000);
    transform: translateY(1px);
  }

  .tc-btn-danger {
    background-color: var(--tc-red-bg);
    border-color: var(--tc-red-border);
    color: var(--tc-red);
    font-weight: 500;
  }

  .tc-btn-danger:hover {
    background-color: color-mix(in srgb, var(--tc-red) 25%, var(--tc-bg-surface-1));
    border-color: var(--tc-red);
  }

  .tc-btn-outline {
    background-color: transparent;
    border-color: var(--tc-border-contrast);
    color: var(--tc-text-main);
  }

  .tc-btn-outline:hover {
    background-color: var(--tc-bg-surface-2);
    border-color: var(--tc-border-focus);
  }

  .tc-btn-sm {
    padding-block: 5px;
    padding-inline: 12px;
    font-size: 0.78rem;
  }

  /* Grupo de Botões Unidos (Bordas Compartilhadas) */
  .tc-btn-group {
    display: inline-flex;
  }

  .tc-btn-group .tc-btn {
    margin-inline-start: -1px;
  }

  .tc-btn-group .tc-btn:first-child {
    margin-inline-start: 0;
  }

  /* ==============================================================================
     Inputs e Controles de Formulário (Aparência Inset / Editável)
     ============================================================================== */
  .tc-input, .tc-select, .tc-textarea {
    width: 100%;
    background-color: var(--tc-bg-base);
    border: 1px solid var(--tc-border-base);
    color: var(--tc-text-main);
    padding-block: 9px;
    padding-inline: 12px;
    font-family: var(--tc-font-sans);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.12s ease;
  }

  .tc-input::placeholder, .tc-textarea::placeholder {
    color: var(--tc-text-dim);
  }

  .tc-input:hover, .tc-select:hover, .tc-textarea:hover {
    border-color: var(--tc-border-contrast);
  }

  .tc-input:focus, .tc-select:focus, .tc-textarea:focus {
    border-color: var(--tc-border-focus);
  }

  .tc-input:focus-visible, .tc-select:focus-visible, .tc-textarea:focus-visible {
    outline: 2px solid var(--tc-border-focus);
    outline-offset: 1px;
  }

  .tc-input-mono {
    font-family: var(--tc-font-mono);
    font-size: 0.85rem;
  }

  /* Checkbox Ortogonal Técnico com Alta Affordance */
  .tc-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--tc-font-sans);
    font-size: 0.875rem;
    color: var(--tc-text-main);
    user-select: none;
  }

  .tc-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background-color: var(--tc-bg-base);
    border: 1px solid var(--tc-border-contrast);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    margin: 0;
    transition: border-color 0.12s ease, background-color 0.12s ease;
  }

  .tc-checkbox:hover {
    border-color: var(--tc-amber);
  }

  .tc-checkbox:focus-visible {
    outline: 2px solid var(--tc-border-focus);
    outline-offset: 2px;
  }

  .tc-checkbox:checked {
    background-color: var(--tc-amber);
    border-color: var(--tc-amber);
  }

  .tc-checkbox:checked::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #0a0c10;
  }

  /* ==============================================================================
     Tags e Badges Técnicos (Diferenciação Estática com Alto Contraste)
     ============================================================================== */
  .tc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 3px;
    padding-inline: 8px;
    background-color: var(--tc-bg-surface-2);
    border: 1px solid var(--tc-border-contrast);
    color: var(--tc-text-muted);
    font-family: var(--tc-font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: default;
  }

  /* Badges Interativos (Links e Botões) */
  a.tc-badge, button.tc-badge, .tc-badge[href] {
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, filter 0.12s ease, transform 0.12s ease;
  }

  a.tc-badge:hover, button.tc-badge:hover, .tc-badge[href]:hover {
    filter: brightness(1.18);
    border-color: var(--tc-border-focus);
  }

  a.tc-badge:active, button.tc-badge:active, .tc-badge[href]:active {
    transform: translateY(1px);
    filter: brightness(0.95);
  }

  a.tc-badge:focus-visible, button.tc-badge:focus-visible, .tc-badge[href]:focus-visible {
    outline: 2px solid var(--tc-border-focus);
    outline-offset: 2px;
  }

  .tc-badge.active, .tc-badge.tc-badge-amber {
    border-color: var(--tc-amber-border);
    background-color: var(--tc-amber-bg);
    color: var(--tc-amber);
  }

  .tc-badge.tc-badge-emerald {
    border-color: var(--tc-emerald-border);
    background-color: var(--tc-emerald-bg);
    color: var(--tc-emerald);
  }

  .tc-badge.tc-badge-red {
    border-color: var(--tc-red-border);
    background-color: var(--tc-red-bg);
    color: var(--tc-red);
  }

  .tc-badge.tc-badge-blue {
    border-color: var(--tc-blue-border);
    background-color: var(--tc-blue-bg);
    color: var(--tc-blue);
  }

  .tc-badge.tc-badge-cyan {
    border-color: var(--tc-cyan-border);
    background-color: var(--tc-cyan-bg);
    color: var(--tc-cyan);
  }

  /* ==============================================================================
     Blocos de Comando e Terminal
     ============================================================================== */
  .tc-code-block {
    background-color: var(--tc-bg-surface-1);
    border: 1px solid var(--tc-border-base);
    padding-block: 16px;
    padding-inline: 20px;
    font-family: var(--tc-font-mono);
    font-size: 0.85rem;
    color: var(--tc-text-main);
    overflow-x: auto;
    line-height: 1.6;
  }

  .tc-code-block.tc-prompt::before {
    content: ">_ ";
    color: var(--tc-emerald);
    font-weight: 600;
  }

  /* ==============================================================================
     Alertas Ortogonais com Alto Contraste (Ratio 13:1)
     ============================================================================== */
  .tc-alert {
    border: 1px solid var(--tc-border-base);
    background-color: var(--tc-bg-surface-1);
    padding-block: 16px;
    padding-inline: 20px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--tc-text-main);
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }

  .tc-alert-warning {
    border-inline-start: 4px solid var(--tc-amber);
    background-color: var(--tc-amber-bg);
  }

  .tc-alert-danger {
    border-inline-start: 4px solid var(--tc-red);
    background-color: var(--tc-red-bg);
  }

  .tc-alert-info {
    border-inline-start: 4px solid var(--tc-blue);
    background-color: var(--tc-blue-bg);
  }
}
/* ==============================================================================
   06-tables.css - Tabelas de Dados e Grids de Informação Densa
   Camada: components | Leitura Ergonômica e Alinhamento Preciso de Métricas
   ============================================================================== */

@layer components {
  .tc-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--tc-border-base);
  }

  .tc-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--tc-font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    background-color: var(--tc-bg-surface-1);
  }

  .tc-table th, .tc-table td {
    padding-block: 10px;
    padding-inline: 14px;
    border-block-end: 1px solid var(--tc-border-base);
    text-align: left;
  }

  .tc-table th {
    color: var(--tc-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--tc-font-mono);
    font-size: 0.80rem;
    background-color: var(--tc-bg-surface-2);
    letter-spacing: 0.05em;
    border-block-end: 1px solid var(--tc-border-contrast);
  }

  .tc-table tbody tr:last-child td {
    border-block-end: none;
  }

  .tc-table tbody tr:hover {
    background-color: var(--tc-bg-surface-hover);
  }

  .tc-table-zebra tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
  }

  /* Colunas Alinhadas */
  .tc-table td.tc-num, .tc-table th.tc-num {
    font-family: var(--tc-font-mono);
    text-align: right;
  }

  .tc-table td.tc-center, .tc-table th.tc-center {
    text-align: center;
  }

  /* Subtexto de Tabela */
  .tc-table-subtext {
    display: block;
    font-family: var(--tc-font-mono);
    font-size: 0.78rem;
    color: var(--tc-text-dim);
    margin-block-start: 2px;
  }
}
/* ==============================================================================
   07-zettelkasten.css - Cartões de Arquitetura Densa (Padrão Zettelkasten)
   Camada: components | Proximidade Gestalt, Ergonomia de Leitura e Metadados
   ============================================================================== */

@layer components {
  .tc-zk-card {
    background-color: var(--tc-bg-surface-1);
    border: 1px solid var(--tc-border-base);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.12s ease, background-color 0.12s ease;
  }

  .tc-zk-card:hover {
    border-color: var(--tc-border-contrast);
    background-color: var(--tc-bg-surface-2);
  }

  .tc-zk-header {
    font-family: var(--tc-font-mono);
    color: var(--tc-amber);
    font-size: 0.80rem;
    border-block-end: 1px dashed var(--tc-border-base);
    padding-block-end: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.04em;
  }

  .tc-zk-id {
    color: var(--tc-amber);
    font-weight: 600;
  }

  .tc-zk-title {
    font-size: 1.10rem;
    font-weight: 600;
    color: var(--tc-text-main);
    letter-spacing: -0.01em;
    margin-block-start: 2px;
  }

  .tc-zk-body {
    font-size: 0.90rem;
    color: var(--tc-text-muted);
    line-height: 1.6;
    flex: 1;
  }

  .tc-zk-footer {
    font-family: var(--tc-font-mono);
    font-size: 0.78rem;
    color: var(--tc-text-dim);
    border-block-start: 1px solid var(--tc-border-muted);
    padding-block-start: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tc-zk-meta {
    display: flex;
    gap: 14px;
  }
}
/* ==============================================================================
   08-telemetry.css - Indicadores Analógicos e Telemetria
   Camada: components | Medidores Segmentados, Status e Cartões de Métricas
   ============================================================================== */

@layer components {
  /* ==============================================================================
     Indicadores Analógicos de Estado
     ============================================================================== */
  .tc-status-square {
    width: 8px;
    height: 8px;
    display: inline-block;
    background-color: var(--tc-text-dim);
    vertical-align: middle;
    flex-shrink: 0;
  }

  .tc-status-square.tc-online {
    background-color: var(--tc-emerald);
  }

  .tc-status-square.tc-warning {
    background-color: var(--tc-amber);
  }

  .tc-status-square.tc-offline {
    background-color: var(--tc-red);
  }

  /* Barra Segmentada de Nível (LED/CRT Analógico) */
  .tc-segment-bar {
    display: inline-flex;
    gap: 2px;
    align-items: center;
  }

  .tc-segment-bar .tc-segment {
    width: 4px;
    height: 12px;
    background-color: var(--tc-bg-surface-3);
  }

  .tc-segment-bar .tc-segment.tc-active {
    background-color: var(--tc-amber);
  }

  .tc-segment-bar .tc-segment.tc-active-emerald {
    background-color: var(--tc-emerald);
  }

  .tc-segment-bar .tc-segment.tc-active-red {
    background-color: var(--tc-red);
  }

  /* ==============================================================================
     Cartões de Métricas e Telemetria (Stat Blocks)
     ============================================================================== */
  .tc-stat-card {
    background-color: var(--tc-bg-surface-1);
    border: 1px solid var(--tc-border-base);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .tc-stat-label {
    font-family: var(--tc-font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tc-text-muted);
  }

  .tc-stat-value {
    font-family: var(--tc-font-mono);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--tc-text-main);
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  .tc-stat-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: 6px;
    font-family: var(--tc-font-mono);
    font-size: 0.78rem;
    color: var(--tc-text-dim);
  }

  .tc-stat-delta {
    font-weight: 500;
  }

  .tc-stat-delta.tc-up {
    color: var(--tc-emerald);
  }

  .tc-stat-delta.tc-down {
    color: var(--tc-red);
  }
}
/* ==============================================================================
   09-utilities.css - Utilitários Funcionais e Bordas Ortogonais
   Camada: utilities | Propriedades Lógicas e Alta Especificidade de Camada
   ============================================================================== */

@layer utilities {
  /* Bordas Ortogonais */
  .tc-border { border: 1px solid var(--tc-border-base); }
  .tc-border-t { border-block-start: 1px solid var(--tc-border-base); }
  .tc-border-b { border-block-end: 1px solid var(--tc-border-base); }
  .tc-border-l { border-inline-start: 1px solid var(--tc-border-base); }
  .tc-border-r { border-inline-end: 1px solid var(--tc-border-base); }

  /* Superfícies */
  .tc-bg-base { background-color: var(--tc-bg-base); }
  .tc-bg-surface-1 { background-color: var(--tc-bg-surface-1); }
  .tc-bg-surface-2 { background-color: var(--tc-bg-surface-2); }
  .tc-bg-surface-3 { background-color: var(--tc-bg-surface-3); }

  /* Alinhamento de Texto */
  .tc-text-left { text-align: start; }
  .tc-text-center { text-align: center; }
  .tc-text-right { text-align: end; }

  /* Dimensionamento e Display */
  .tc-w-full { width: 100%; }
  .tc-inline-block { display: inline-block; }
  .tc-block { display: block; }

  /* Margens Lógicas */
  .tc-m-0 { margin: 0; }
  .tc-m-inline-auto { margin-inline: auto; }
  .tc-mb-1 { margin-block-end: var(--tc-space-1); }
  .tc-mb-2 { margin-block-end: var(--tc-space-2); }
  .tc-mb-3 { margin-block-end: var(--tc-space-3); }
  .tc-mb-4 { margin-block-end: var(--tc-space-4); }
  .tc-mb-5 { margin-block-end: var(--tc-space-5); }
  .tc-mb-6 { margin-block-end: var(--tc-space-6); }

  /* Preenchimentos Lógicos */
  .tc-p-2 { padding: var(--tc-space-2); }
  .tc-p-3 { padding: var(--tc-space-3); }
  .tc-p-4 { padding: var(--tc-space-4); }
  .tc-p-5 { padding: var(--tc-space-5); }
  .tc-p-6 { padding: var(--tc-space-6); }
  .tc-p-inline-2 { padding-inline: var(--tc-space-2); }
  .tc-p-inline-4 { padding-inline: var(--tc-space-4); }
  .tc-p-inline-5 { padding-inline: var(--tc-space-5); }
  .tc-p-block-2 { padding-block: var(--tc-space-2); }
  .tc-p-block-4 { padding-block: var(--tc-space-4); }
  .tc-p-block-5 { padding-block: var(--tc-space-5); }
}