:root {
  // Bell
  --ntf-bell-size: 40px;
  --ntf-bell-color: var(--color-text-secondary, #6b7280);
  --ntf-bell-hover-bg: var(--color-bg-hover, #f3f4f6);
  --ntf-badge-bg: var(--color-error-500, #ef4444);
  --ntf-badge-color: #ffffff;
  --ntf-badge-size: 20px;

  // Feed / Center
  --ntf-feed-bg: var(--color-bg-primary, #ffffff);
  --ntf-feed-border: var(--color-border-primary, #e5e7eb);
  --ntf-feed-radius: var(--radius-container-lg, 1rem);
  --ntf-feed-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --ntf-feed-width: 420px;
  --ntf-feed-max-height: 480px;

  // Item
  --ntf-item-bg: var(--color-bg-primary, #ffffff);
  --ntf-item-hover-bg: var(--color-bg-hover, #f9fafb);
  --ntf-item-unread-bg: var(--color-primary-50, #eff6ff);
  --ntf-item-unread-border: var(--color-primary-500, #3b82f6);
  --ntf-item-padding: 1rem;
  --ntf-item-gap: 0.75rem;
  --ntf-item-border: var(--color-border-primary, #e5e7eb);
  --ntf-item-title-color: var(--color-text-primary, #111827);
  --ntf-item-title-font-size: var(--font-size-sm, 0.875rem);
  --ntf-item-title-font-weight: 500;
  --ntf-item-body-color: var(--color-text-secondary, #6b7280);
  --ntf-item-body-font-size: var(--font-size-xs, 0.75rem);
  --ntf-item-time-color: var(--color-text-muted, #9ca3af);
  --ntf-item-time-font-size: var(--font-size-xs, 0.75rem);

  // Comment / Thread
  --ntf-comment-bg: var(--color-bg-secondary, #f9fafb);
  --ntf-comment-border: var(--color-border-primary, #e5e7eb);
  --ntf-comment-radius: 0.75rem;
  --ntf-comment-padding: 1rem;
  --ntf-comment-author-color: var(--color-text-primary, #111827);
  --ntf-comment-author-font-size: var(--font-size-sm, 0.875rem);
  --ntf-comment-author-font-weight: 600;
  --ntf-comment-content-color: var(--color-text-secondary, #374151);
  --ntf-comment-content-font-size: var(--font-size-sm, 0.875rem);
  --ntf-thread-connector-color: var(--color-border-primary, #e5e7eb);
  --ntf-thread-connector-width: 2px;

  // Inbox
  --ntf-inbox-item-bg: var(--color-bg-primary, #ffffff);
  --ntf-inbox-item-hover-bg: var(--color-bg-hover, #f9fafb);
  --ntf-inbox-unread-weight: 600;
  --ntf-inbox-star-color: #eab308;
  --ntf-inbox-selected-bg: var(--color-primary-50, #eff6ff);

  // Mention
  --ntf-mention-bg: var(--color-primary-50, #eff6ff);
  --ntf-mention-color: var(--color-primary-700, #1d4ed8);
  --ntf-mention-popup-bg: var(--color-bg-primary, #ffffff);
  --ntf-mention-popup-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --ntf-mention-popup-radius: 0.5rem;
  --ntf-mention-popup-max-height: 200px;

  // Empty state
  --ntf-empty-color: var(--color-text-muted, #9ca3af);
  --ntf-empty-icon-size: 48px;

  // Transitions
  --ntf-transition: 150ms ease-in-out;
  --ntf-transition-slow: 300ms ease-in-out;

  // Easing
  --ntf-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ntf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ntf-feed-bg: var(--color-bg-primary, #111827);
    --ntf-feed-border: var(--color-border-primary, #1e2536);
    --ntf-feed-shadow: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);

    --ntf-item-bg: var(--color-bg-primary, #111827);
    --ntf-item-hover-bg: var(--color-bg-hover, #1e2536);
    --ntf-item-unread-bg: rgba(59, 130, 246, 0.1);
    --ntf-item-border: var(--color-border-primary, #1e2536);
    --ntf-item-title-color: var(--color-text-primary, #f9fafb);
    --ntf-item-body-color: var(--color-text-secondary, #9ca3af);
    --ntf-item-time-color: var(--color-text-muted, #6b7280);

    --ntf-comment-bg: var(--color-bg-secondary, #161b26);
    --ntf-comment-border: var(--color-border-primary, #1e2536);
    --ntf-comment-author-color: var(--color-text-primary, #f9fafb);
    --ntf-comment-content-color: var(--color-text-secondary, #9ca3af);
    --ntf-thread-connector-color: var(--color-border-primary, #1e2536);

    --ntf-inbox-item-bg: var(--color-bg-primary, #111827);
    --ntf-inbox-item-hover-bg: var(--color-bg-hover, #1e2536);
    --ntf-inbox-selected-bg: rgba(59, 130, 246, 0.1);

    --ntf-mention-bg: rgba(59, 130, 246, 0.15);
    --ntf-mention-color: #93bbfd;
    --ntf-mention-popup-bg: var(--color-bg-primary, #111827);
    --ntf-mention-popup-shadow: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);

    --ntf-bell-color: var(--color-text-secondary, #9ca3af);
    --ntf-bell-hover-bg: var(--color-bg-hover, #1e2536);

    --ntf-empty-color: var(--color-text-muted, #6b7280);
  }
}

[data-mode="dark"] {
  --ntf-feed-bg: var(--color-bg-primary, #111827);
  --ntf-feed-border: var(--color-border-primary, #1e2536);
  --ntf-feed-shadow: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);

  --ntf-item-bg: var(--color-bg-primary, #111827);
  --ntf-item-hover-bg: var(--color-bg-hover, #1e2536);
  --ntf-item-unread-bg: rgba(59, 130, 246, 0.1);
  --ntf-item-border: var(--color-border-primary, #1e2536);
  --ntf-item-title-color: var(--color-text-primary, #f9fafb);
  --ntf-item-body-color: var(--color-text-secondary, #9ca3af);
  --ntf-item-time-color: var(--color-text-muted, #6b7280);

  --ntf-comment-bg: var(--color-bg-secondary, #161b26);
  --ntf-comment-border: var(--color-border-primary, #1e2536);
  --ntf-comment-author-color: var(--color-text-primary, #f9fafb);
  --ntf-comment-content-color: var(--color-text-secondary, #9ca3af);
  --ntf-thread-connector-color: var(--color-border-primary, #1e2536);

  --ntf-inbox-item-bg: var(--color-bg-primary, #111827);
  --ntf-inbox-item-hover-bg: var(--color-bg-hover, #1e2536);
  --ntf-inbox-selected-bg: rgba(59, 130, 246, 0.1);

  --ntf-mention-bg: rgba(59, 130, 246, 0.15);
  --ntf-mention-color: #93bbfd;
  --ntf-mention-popup-bg: var(--color-bg-primary, #111827);
  --ntf-mention-popup-shadow: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);

  --ntf-bell-color: var(--color-text-secondary, #9ca3af);
  --ntf-bell-hover-bg: var(--color-bg-hover, #1e2536);

  --ntf-empty-color: var(--color-text-muted, #6b7280);
}