/*
  Wortic macOS UI Kit — Card / Group Box / Well / Stat Card
  wm-card

  Glowup 2026: sombras em camadas (anel hairline + contato + ambiente),
  cantos generosos, hover que eleva de verdade, glass com blur alto e
  borda interna clara, stat card com números tabulares e delta em pílula.
*/

@layer components {
  .wm-card {
    background: var(--wm-surface-elevated);
    border-radius: var(--wm-radius-xl);
    padding: var(--wm-space-8);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .wm-card--compact {
    padding: var(--wm-space-5);
    border-radius: var(--wm-radius-lg);
  }

  .wm-card--inset {
    background: var(--wm-surface-secondary);
    box-shadow: none;
  }

  /* Sombra em 3 camadas: anel + contato + ambiente. */
  .wm-card--elevated {
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-2),
      var(--wm-shadow-3),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .wm-card--interactive {
    cursor: pointer;
    transition:
      transform var(--wm-duration-fast) var(--wm-ease-emphasized),
      box-shadow var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  .wm-card--interactive:hover {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-2),
      var(--wm-shadow-3),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  .wm-card--interactive:active {
    transform: translateY(0) scale(0.985);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
  }

  /* Anel duplo: accent + halo alpha. */
  .wm-card--selected {
    box-shadow:
      0 0 0 1px var(--wm-accent),
      0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill),
      var(--wm-shadow-1);
  }

  .wm-card--glass {
    background: var(--wm-material-popover-bg);
    backdrop-filter: blur(36px) saturate(var(--wm-material-saturate));
    -webkit-backdrop-filter: blur(36px) saturate(var(--wm-material-saturate));
    box-shadow:
      inset 0 0 0 var(--wm-border-width-hairline) var(--wm-material-glass-border),
      var(--wm-shadow-2),
      var(--wm-shadow-3);
  }

  .wm-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--wm-space-5);
  }
  .wm-card__title {
    font-size: var(--wm-font-size-headline);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-tight);
    color: var(--wm-label-primary);
  }
  .wm-card__subtitle {
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-tertiary);
    margin-top: 2px;
  }

  /* Group Box — título como legend, contorno hairline discreto */
  .wm-group-box {
    border: var(--wm-border-width-hairline) solid var(--wm-separator);
    border-radius: var(--wm-radius-lg);
    padding: var(--wm-space-6);
  }
  .wm-group-box__legend {
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-wide);
    color: var(--wm-label-secondary);
    margin-bottom: var(--wm-space-4);
  }

  /* Well — superfície recuada (oposto de elevated) */
  .wm-well {
    background: var(--wm-surface-sunken);
    border-radius: var(--wm-radius-md);
    padding: var(--wm-space-5);
    box-shadow:
      inset 0 1px 3px rgba(0, 0, 0, 0.07),
      inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
  }

  /* Stat card — número grande + label + delta em pílula */
  .wm-stat-card {
    background: var(--wm-surface-elevated);
    border-radius: var(--wm-radius-xl);
    padding: var(--wm-space-8);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .wm-stat-card__label {
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
    margin-bottom: var(--wm-space-3);
  }
  .wm-stat-card__value {
    font-size: var(--wm-font-size-title1);
    font-weight: var(--wm-font-weight-bold);
    letter-spacing: var(--wm-letter-spacing-tighter, -0.02em);
    font-variant-numeric: tabular-nums;
    line-height: var(--wm-line-height-tight);
    color: var(--wm-label-primary);
  }
  .wm-stat-card__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-1);
    margin-top: var(--wm-space-4);
    padding: 2px var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
  }
  .wm-stat-card__delta--positive {
    color: var(--wm-success);
    background: var(--wm-success-fill);
  }
  .wm-stat-card__delta--negative {
    color: var(--wm-error);
    background: var(--wm-error-fill);
  }
}