/*
 * Superfícies Diary.fm
 *
 * O cartão do perfil pessoal é a referência de contorno e elevação.
 * Novos cartões, painéis e notificações devem usar a classe .app-surface
 * ou ser incluídos no registro de superfícies abaixo. Não fixe border ou
 * box-shadow diretamente no componente.
 */

:root {
  --diary-surface-border-width: 1.2px;
  --diary-surface-border-color: var(--panel-border, var(--border));
  --diary-surface-shadow-color: var(--accent-strong, var(--accent));
  --diary-surface-shadow:
    0 3px 4px color-mix(in srgb, var(--diary-surface-shadow-color) 20%, transparent),
    inset 0 1px 2px rgba(255,255,255,.84);
}

body[data-theme^="xp-"] {
  --diary-surface-border-width: 1.2px;
  --diary-surface-border-color: var(--panel-border, var(--border));
  --diary-surface-shadow-color: var(--accent-strong, var(--accent));
  --diary-surface-shadow:
    0 3px 4px color-mix(in srgb, var(--diary-surface-shadow-color) 20%, transparent),
    inset 0 1px 2px rgba(255,255,255,.84);
}

body[data-theme="xp-aqua"] {
  --diary-surface-border-color: #3a76be;
  --diary-surface-shadow-color: #1a6fdb;
}

body[data-theme="xp-clinical-bloom"],
body[data-theme="xp-aqua"][data-theme-variant="xp-clinical-bloom"] {
  --diary-surface-border-color: #9fd5e6;
  --diary-surface-shadow-color: #1f79ba;
}

body[data-theme="xp-limewave"],
body[data-theme="xp-aqua"][data-theme-variant="xp-limewave"] {
  --diary-surface-border-color: #b9e1c4;
  --diary-surface-shadow-color: #349b78;
}

body[data-theme^="web2-"] {
  --diary-surface-border-width: 1px;
  --diary-surface-border-color: color-mix(in srgb, var(--panel-border, var(--border)) 78%, transparent);
  --diary-surface-shadow-color: var(--accent-strong, var(--accent));
  --diary-surface-shadow:
    0 6px 14px color-mix(in srgb, var(--diary-surface-shadow-color) 15%, transparent),
    inset 0 1px 2px rgba(255,255,255,.88);
}

body[data-theme="web2-glossy"] {
  --diary-surface-border-color: color-mix(in srgb, #8ec5ef 78%, transparent);
  --diary-surface-shadow-color: #4b9ddb;
}

body[data-theme="web2-citrus-pop"],
body[data-theme="web2-glossy"][data-theme-variant="web2-citrus-pop"] {
  --diary-surface-border-color: color-mix(in srgb, #edc075 78%, transparent);
  --diary-surface-shadow-color: #ee7433;
}

body[data-theme="web2-sky-signal"],
body[data-theme="web2-glossy"][data-theme-variant="web2-sky-signal"] {
  --diary-surface-border-color: color-mix(in srgb, #a1d5f0 78%, transparent);
  --diary-surface-shadow-color: #16a9dd;
}

/* Registro central das superfícies estruturais existentes. */
body[data-theme] :is(
  .app-surface,
  .hero-card,
  .now-playing-panel,
  .recommendations-panel,
  .friends-feed,
  .friends-feed article,
  .controls-panel,
  .result-submenu,
  .period-comparison,
  .identity-card,
  .music-grid-builder,
  .library-dialog-panel,
  .feed-post,
  .stat-card,
  .insight-card,
  .chart-panel,
  .list-panel,
  .public-profile-card,
  .connected-account-card,
  .edit-profile-card,
  .edit-photo-card,
  .change-platform-card,
  .change-platform-notice,
  .change-platform-option,
  .friend-card,
  .viewer-profile-panel,
  .theme-family,
  .theme-unsaved-warning,
  .app-notification-balloon
) {
  border-width: var(--diary-surface-border-width);
  border-style: solid;
  border-color: var(--diary-surface-border-color);
  box-shadow: var(--diary-surface-shadow);
}

/* A cauda é parte do mesmo contorno do balão. */
body[data-theme] .app-notification-balloon::after {
  border-left-width: var(--diary-surface-border-width);
  border-bottom-width: var(--diary-surface-border-width);
  border-left-color: var(--diary-surface-border-color);
  border-bottom-color: var(--diary-surface-border-color);
}