/* =============================================================================
   GP Design System — "Graphite & Linen"
   -----------------------------------------------------------------------------
   Fonte única de verdade. Este arquivo é framework-agnóstico: qualquer
   plataforma futura copia `tokens.css` + a pasta `fonts/` e já tem o sistema.
   O React (components/) e o Tailwind (tailwind.config.ts) só leem daqui.

   Adoção por escopo: nada muda até um container receber a classe `.ds-theme`.
   Projetos com shadcn/ui importam também `shadcn-bridge.css` (Tailwind v3,
   tokens HSL) ou `shadcn-bridge.v4.css` (Tailwind v4) para que os
   componentes existentes herdem paleta e raio sem reescrita.
   Ver DESIGN.md para as regras de uso.
   ============================================================================= */

@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------------
     Primitivos — grafite quente. Nunca usar direto em tela: use os semânticos.
     --------------------------------------------------------------------------- */
  --ds-graphite-950: #141312;
  --ds-graphite-900: #1c1b1a;
  --ds-graphite-850: #232220;
  --ds-graphite-800: #2b2927;
  --ds-graphite-700: #3a3835;
  --ds-graphite-600: #4b4844;
  --ds-graphite-500: #6b6762;
  --ds-graphite-400: #8e8a84;
  --ds-graphite-300: #b3afa9;
  --ds-graphite-200: #d9d7d3;
  --ds-graphite-150: #e8e7e4;
  --ds-graphite-100: #efeeeb;
  --ds-graphite-50: #f4f4f2;
  --ds-white: #ffffff;

  /* ---------------------------------------------------------------------------
     Tipografia
     --------------------------------------------------------------------------- */
  --ds-font-sans: "Satoshi", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", monospace;

  /* ---------------------------------------------------------------------------
     Raios — regra concêntrica: raio interno = raio externo − espaçamento.
     --------------------------------------------------------------------------- */
  --ds-radius-xs: 8px;
  --ds-radius-sm: 12px;
  --ds-radius-md: 16px;
  --ds-radius-lg: 20px;
  --ds-radius-xl: 24px;
  --ds-radius-2xl: 28px;
  --ds-radius-3xl: 36px;
  --ds-radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------------- */
  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ds-dur-fast: 120ms;
  --ds-dur: 200ms;
  --ds-dur-slow: 320ms;

  /* ---------------------------------------------------------------------------
     Semânticos — tema claro (padrão)
     --------------------------------------------------------------------------- */
  --ds-bg: var(--ds-graphite-50);
  --ds-surface: var(--ds-white);
  --ds-sunken: var(--ds-graphite-100);
  --ds-border: var(--ds-graphite-150);
  --ds-border-strong: var(--ds-graphite-200);
  --ds-divider: var(--ds-graphite-100);

  --ds-fg: #1a1918;            /* 17.4:1 no surface */
  --ds-fg-2: var(--ds-graphite-500); /* 5.7:1 — texto secundário */
  --ds-fg-3: var(--ds-graphite-400); /* 3.4:1 — só texto grande ou decorativo */

  /* Moldura escura (sidebar/app shell) e texto sobre metal: iguais nos dois temas. */
  --ds-frame: var(--ds-graphite-900);
  --ds-on-metal: #f4f2ef;
  --ds-on-metal-2: #a9a49e;

  --ds-ring: var(--ds-graphite-500);
  --ds-accent: #b08d57; /* champanhe — único acento, uso mínimo. Tenants trocam aqui. */

  --ds-success: #2f7a58;
  --ds-success-soft: #e6f1eb;
  --ds-danger: #b4403a;
  --ds-danger-soft: #f8e8e6;
  --ds-warning: #93660f;
  --ds-warning-soft: #f6eedb;
  --ds-info: #3a64a8;
  --ds-info-soft: #e7edf7;

  /* ---------------------------------------------------------------------------
     Gradientes metalizados — a assinatura do sistema.
     Todo metal = base linear escura + brilho radial vindo de cima.
     --------------------------------------------------------------------------- */
  --ds-metal-graphite:
    radial-gradient(120% 120% at 50% -30%, rgb(255 255 255 / 0.2) 0%, rgb(255 255 255 / 0) 55%),
    linear-gradient(180deg, #4b4844 0%, #34322f 55%, #2a2826 100%);
  --ds-metal-panel:
    radial-gradient(90% 55% at 18% 0%, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, #2c2a28 0%, #232120 100%);
  --ds-metal-pill: linear-gradient(90deg, rgb(255 255 255 / 0.2) 0%, rgb(255 255 255 / 0.07) 55%, rgb(255 255 255 / 0) 100%);
  --ds-metal-well: radial-gradient(110% 110% at 30% 15%, #4a4744 0%, #33312e 75%);
  --ds-metal-well-active: radial-gradient(110% 110% at 30% 15%, #aba59e 0%, #77716b 80%);
  --ds-metal-rim: linear-gradient(180deg, rgb(255 255 255 / 0.2) 0%, rgb(255 255 255 / 0.03) 45%, rgb(255 255 255 / 0.07) 100%);
  --ds-metal-pearl: linear-gradient(180deg, #ffffff 0%, #f3f2ef 100%);

  /* ---------------------------------------------------------------------------
     Sombras — sempre em tom de grafite, nunca preto puro.
     --------------------------------------------------------------------------- */
  --ds-shadow-xs: 0 1px 2px rgb(20 19 18 / 0.05);
  --ds-shadow-sm: 0 1px 2px rgb(20 19 18 / 0.04), 0 4px 12px -4px rgb(20 19 18 / 0.07);
  --ds-shadow-md: 0 1px 2px rgb(20 19 18 / 0.05), 0 14px 32px -14px rgb(20 19 18 / 0.2);
  --ds-shadow-lg: 0 2px 4px rgb(20 19 18 / 0.06), 0 28px 56px -20px rgb(20 19 18 / 0.32);
  --ds-highlight: inset 0 1px 0 rgb(255 255 255 / 0.1);
  --ds-highlight-strong: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 -1px 0 rgb(0 0 0 / 0.22);
}

/* Tema escuro: `.ds-theme.dark` (toggle local) ou `.dark .ds-theme` (global). */
.ds-theme.dark,
.dark .ds-theme {
  --ds-bg: var(--ds-graphite-950);
  --ds-surface: #1e1d1b;
  --ds-sunken: #262422;
  --ds-border: #2e2c29;
  --ds-border-strong: #37342f;
  --ds-divider: #282624;

  --ds-fg: #f2f0ec;
  --ds-fg-2: #a9a49e;
  --ds-fg-3: #7d7973;

  --ds-frame: #0e0d0c;
  --ds-ring: #a9a49e;

  --ds-success: #6cc59a;
  --ds-success-soft: rgb(108 197 154 / 0.12);
  --ds-danger: #e0837b;
  --ds-danger-soft: rgb(224 131 123 / 0.12);
  --ds-warning: #d9b25e;
  --ds-warning-soft: rgb(217 178 94 / 0.12);
  --ds-info: #86a8e0;
  --ds-info-soft: rgb(134 168 224 / 0.12);

  --ds-metal-graphite:
    radial-gradient(120% 120% at 50% -30%, rgb(255 255 255 / 0.22) 0%, rgb(255 255 255 / 0) 55%),
    linear-gradient(180deg, #5a5651 0%, #3e3b38 55%, #312f2c 100%);
  --ds-metal-pearl: linear-gradient(180deg, #262422 0%, #1e1d1b 100%);

  --ds-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 12px -4px rgb(0 0 0 / 0.4);
  --ds-shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 14px 32px -14px rgb(0 0 0 / 0.6);
  --ds-shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 28px 56px -20px rgb(0 0 0 / 0.7);
}

/* ---------------------------------------------------------------------------
   Escopo do tema: fonte, fundo e cor de texto. Em @layer base para que
   `.ds-frame` (components) vença no mesmo elemento, com Tailwind ou com
   camadas nativas do CSS. A ponte para o shadcn fica em shadcn-bridge*.css.
   --------------------------------------------------------------------------- */
@layer base {
  .ds-theme {
    font-family: var(--ds-font-sans);
    background-color: var(--ds-bg);
    color: var(--ds-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

@layer components {
  /* ===========================================================================
     Tipografia — escala de 7 degraus. Peso 500 para títulos, 400 para texto.
     Satoshi não tem 600 visualmente distinto de 700: não use font-semibold.
     =========================================================================== */
  .ds-display {
    font-size: clamp(2.25rem, 1.75rem + 2vw, 3rem);
    line-height: 1.04;
    font-weight: 500;
    letter-spacing: -0.04em;
  }
  .ds-h1 {
    font-size: 1.75rem;
    line-height: 2.125rem;
    font-weight: 500;
    letter-spacing: -0.025em;
  }
  .ds-h2 {
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .ds-h3 {
    font-size: 1.0625rem;
    line-height: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .ds-body-lg {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .ds-body {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .ds-caption {
    font-size: 0.8125rem;
    line-height: 1.125rem;
  }
  .ds-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .ds-tabular {
    font-variant-numeric: tabular-nums;
  }

  /* ===========================================================================
     Superfícies
     =========================================================================== */
  .ds-card {
    background: var(--ds-surface);
    color: var(--ds-fg);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-xs);
    text-decoration: none;
  }

  /* Metal: moldura grafite com brilho em cima e aro de luz de 1px. */
  .ds-card-metal {
    position: relative;
    isolation: isolate;
    color: var(--ds-on-metal);
    background: var(--ds-metal-graphite);
    border-radius: var(--ds-radius-2xl);
    box-shadow: var(--ds-shadow-md), var(--ds-highlight-strong);
    text-decoration: none;
  }
  .ds-card-metal::before,
  .ds-panel-metal::before,
  .ds-rim::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: var(--ds-metal-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  /* Card claro aninhado dentro do metal. O metal usa padding 8px, então o
     raio interno é 28 − 8 = 20px (regra concêntrica). */
  .ds-card-inset {
    background: var(--ds-surface);
    color: var(--ds-fg);
    border-radius: calc(var(--ds-radius-2xl) - 8px);
    box-shadow: 0 -1px 0 rgb(0 0 0 / 0.25), var(--ds-shadow-sm);
    overflow: hidden;
  }

  .ds-frame {
    background: var(--ds-frame);
    color: var(--ds-on-metal);
  }
  .ds-panel-metal {
    position: relative;
    isolation: isolate;
    background: var(--ds-metal-panel);
    border-radius: var(--ds-radius-2xl);
    box-shadow: var(--ds-highlight);
  }
  .ds-rim {
    position: relative;
    isolation: isolate;
  }

  /* ===========================================================================
     Navegação (sidebar)
     =========================================================================== */
  .ds-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.25rem 1rem 0.25rem 0.25rem;
    border-radius: var(--ds-radius-pill);
    color: var(--ds-on-metal-2);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition:
      background-color var(--ds-dur) var(--ds-ease-out),
      color var(--ds-dur) var(--ds-ease-out);
  }
  .ds-nav-item:hover {
    color: var(--ds-on-metal);
    background-color: rgb(255 255 255 / 0.04);
  }
  .ds-nav-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ds-on-metal-2);
  }
  .ds-nav-item.is-active,
  .ds-nav-item[aria-current="page"] {
    color: var(--ds-on-metal);
    background-image: var(--ds-metal-pill);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
  }

  /* Compacto: para listas longas de navegação (área de gestão). */
  .ds-nav-item-sm {
    min-height: 2.5rem;
    gap: 0.625rem;
    padding: 0.1875rem 0.875rem 0.1875rem 0.1875rem;
    font-size: 0.875rem;
  }
  .ds-nav-item-sm .ds-well {
    width: 2rem;
    height: 2rem;
  }
  .ds-nav-item-sm .ds-well svg {
    width: 1rem;
    height: 1rem;
  }

  .ds-well {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-metal-well);
    color: #d9d5d0;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 1px 2px rgb(0 0 0 / 0.35);
    transition: background var(--ds-dur) var(--ds-ease-out);
  }
  .ds-nav-item.is-active .ds-well,
  .ds-nav-item[aria-current="page"] .ds-well,
  .ds-well-active {
    background: var(--ds-metal-well-active);
    color: #ffffff;
  }
  /* Poço claro para uso sobre superfícies claras. */
  .ds-well-light {
    background: var(--ds-metal-pearl);
    color: var(--ds-fg);
    box-shadow: inset 0 0 0 1px var(--ds-border), var(--ds-shadow-xs);
  }

  /* ===========================================================================
     Botões — sempre pill. Um metal por área visível; o resto é outline/ghost.
     =========================================================================== */
  .ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 1.25rem;
    border-radius: var(--ds-radius-pill);
    font-family: var(--ds-font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    transition:
      transform var(--ds-dur-fast) var(--ds-ease-out),
      filter var(--ds-dur) var(--ds-ease-out),
      background-color var(--ds-dur) var(--ds-ease-out),
      border-color var(--ds-dur) var(--ds-ease-out);
  }
  .ds-btn:active:not(:disabled) {
    transform: scale(0.98);
  }
  .ds-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ds-bg), 0 0 0 4px var(--ds-ring);
  }
  .ds-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .ds-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }

  .ds-btn-metal {
    color: var(--ds-on-metal);
    background: var(--ds-metal-graphite);
    box-shadow:
      var(--ds-highlight-strong),
      0 1px 2px rgb(20 19 18 / 0.2),
      0 8px 18px -8px rgb(20 19 18 / 0.45);
  }
  .ds-btn-metal:hover:not(:disabled) {
    filter: brightness(1.1);
  }
  .ds-btn-metal:focus-visible {
    box-shadow: var(--ds-highlight-strong), 0 0 0 2px var(--ds-bg), 0 0 0 4px var(--ds-ring);
  }

  .ds-btn-outline {
    color: var(--ds-fg);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    box-shadow: var(--ds-shadow-xs);
  }
  .ds-btn-outline:hover:not(:disabled) {
    background: var(--ds-sunken);
  }

  .ds-btn-ghost {
    color: var(--ds-fg);
    background: transparent;
  }
  .ds-btn-ghost:hover:not(:disabled) {
    background: var(--ds-sunken);
  }

  /* Vidro: botão/chip sobre superfícies metalizadas (ex.: seletor de moeda). */
  .ds-btn-glass {
    color: var(--ds-on-metal);
    background: rgb(255 255 255 / 0.08);
    border: 1px solid rgb(255 255 255 / 0.1);
    box-shadow: var(--ds-highlight);
  }
  .ds-btn-glass:hover:not(:disabled) {
    background: rgb(255 255 255 / 0.13);
  }

  .ds-btn-danger {
    color: var(--ds-danger);
    background: var(--ds-surface);
    border: 1px solid color-mix(in srgb, var(--ds-danger) 30%, transparent);
  }
  .ds-btn-danger:hover:not(:disabled) {
    background: var(--ds-danger-soft);
  }

  .ds-btn-sm {
    height: 2.25rem;
    padding: 0 0.875rem;
    font-size: 0.875rem;
  }
  .ds-btn-lg {
    height: 3.25rem;
    padding: 0 1.75rem;
    font-size: 1rem;
  }
  .ds-btn-icon {
    width: 2.75rem;
    padding: 0;
  }
  .ds-btn-icon.ds-btn-sm {
    width: 2.25rem;
  }

  /* ===========================================================================
     Formulários
     =========================================================================== */
  .ds-search {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 3rem;
    padding: 0 0.375rem 0 1rem;
    border-radius: var(--ds-radius-pill);
    border: 1px solid var(--ds-border-strong);
    background: transparent;
    color: var(--ds-fg-2);
    transition:
      background-color var(--ds-dur) var(--ds-ease-out),
      box-shadow var(--ds-dur) var(--ds-ease-out);
  }
  .ds-search:focus-within {
    background: var(--ds-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-ring) 18%, transparent);
  }
  .ds-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    color: var(--ds-fg);
    font-size: 0.9375rem;
    outline: none;
  }
  .ds-search input::placeholder {
    color: var(--ds-fg-3);
  }

  .ds-kbd {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-sunken);
    color: var(--ds-fg-2);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
  }

  .ds-input {
    width: 100%;
    min-width: 0;
    height: 2.875rem;
    padding: 0 1rem;
    border-radius: 14px;
    border: 1px solid var(--ds-border-strong);
    background: var(--ds-surface);
    color: var(--ds-fg);
    font-size: 0.9375rem;
    transition:
      border-color var(--ds-dur) var(--ds-ease-out),
      box-shadow var(--ds-dur) var(--ds-ease-out);
  }
  .ds-input::placeholder {
    color: var(--ds-fg-3);
  }
  .ds-input:focus {
    outline: none;
    border-color: var(--ds-fg-3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-ring) 18%, transparent);
  }

  /* ===========================================================================
     Chips, abas segmentadas, ações divididas, linhas, avatares
     =========================================================================== */
  .ds-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.75rem;
    padding: 0 0.625rem;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-sunken);
    color: var(--ds-fg-2);
    font-size: 0.78125rem;
    font-weight: 500;
    white-space: nowrap;
  }
  .ds-chip-success { background: var(--ds-success-soft); color: var(--ds-success); }
  .ds-chip-danger { background: var(--ds-danger-soft); color: var(--ds-danger); }
  .ds-chip-warning { background: var(--ds-warning-soft); color: var(--ds-warning); }
  .ds-chip-info { background: var(--ds-info-soft); color: var(--ds-info); }
  .ds-chip-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
  }

  .ds-segmented {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-sunken);
  }
  .ds-segmented > button {
    height: 2.25rem;
    padding: 0 1rem;
    border-radius: var(--ds-radius-pill);
    color: var(--ds-fg-2);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition:
      background-color var(--ds-dur) var(--ds-ease-out),
      color var(--ds-dur) var(--ds-ease-out);
  }
  .ds-segmented > button:hover {
    color: var(--ds-fg);
  }
  .ds-segmented > button[aria-selected="true"] {
    background: var(--ds-surface);
    color: var(--ds-fg);
    box-shadow: var(--ds-shadow-sm);
  }
  .ds-segmented > button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ds-ring);
  }

  /* Duas ações lado a lado no rodapé de um card (Entrada | Saída). */
  .ds-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--ds-divider);
  }
  .ds-split > * {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3.5rem;
    padding: 0 1rem;
    color: var(--ds-fg);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background-color var(--ds-dur) var(--ds-ease-out);
  }
  .ds-split > * + * {
    border-left: 1px solid var(--ds-divider);
  }
  .ds-split > *:hover {
    background: var(--ds-sunken);
  }
  .ds-split > *:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ds-ring);
  }

  /* Círculo com contorno para ícones de ação (↗ ↙). */
  .ds-icon-ring {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    flex-shrink: 0;
  }
  .ds-icon-ring svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .ds-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    padding: 0.875rem 1.5rem;
    border-top: 1px solid var(--ds-divider);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--ds-dur) var(--ds-ease-out);
  }
  .ds-row:hover {
    background: color-mix(in srgb, var(--ds-sunken) 55%, transparent);
  }

  .ds-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--ds-metal-pearl);
    color: var(--ds-fg-2);
    font-size: 0.9375rem;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--ds-border);
  }
  .ds-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Progresso: trilho rebaixado + preenchimento em metal grafite. */
  .ds-progress {
    position: relative;
    height: 0.5rem;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-sunken);
    box-shadow: inset 0 1px 2px rgb(20 19 18 / 0.06);
    overflow: hidden;
  }
  .ds-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ds-metal-graphite);
    box-shadow: var(--ds-highlight);
    transition: width var(--ds-dur-slow) var(--ds-ease-out);
  }
  .ds-progress-lg {
    height: 0.75rem;
  }

  .ds-dashed {
    border: 1px dashed rgb(255 255 255 / 0.12);
    border-radius: var(--ds-radius-2xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-theme *,
  .ds-theme *::before,
  .ds-theme *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}