:root {
    --al-comment-bg: #fcfcfa;
    --al-comment-bg-soft: #f7f8f4;
    --al-comment-surface: #ffffff;
    --al-comment-surface-soft: #fbfcfa;

    --al-comment-border: #e4e9e1;
    --al-comment-border-soft: #eef2ea;
    --al-comment-border-strong: #cfd9cb;

    --al-comment-text: #27312d;
    --al-comment-text-soft: #4f5d57;
    --al-comment-text-muted: #85948d;
    --al-comment-text-faint: #a9b5af;

    --al-comment-accent: #2f9b8e;
    --al-comment-accent-soft: #dff3ef;
    --al-comment-accent-strong: #228277;
    --al-comment-accent-dark: #1e6a61;

    --al-comment-warm: #b8a98a;
    --al-comment-warm-soft: #f3ece1;

    --al-comment-shadow-xs: 0 4px 14px rgba(28, 49, 44, 0.03);
    --al-comment-shadow-sm: 0 8px 22px rgba(28, 49, 44, 0.05);
    --al-comment-shadow-md: 0 16px 40px rgba(28, 49, 44, 0.07);
    --al-comment-shadow-lg: 0 24px 55px rgba(28, 49, 44, 0.10);

    --al-comment-radius-xs: 10px;
    --al-comment-radius-sm: 14px;
    --al-comment-radius-md: 18px;
    --al-comment-radius-lg: 22px;
    --al-comment-radius-xl: 30px;
    --al-comment-radius-pill: 999px;

    --al-comment-transition-fast: 180ms ease;
    --al-comment-transition: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --al-comment-transition-slow: 420ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --al-comment-max-width: 800px;
    --al-comment-max-width-narrow: 720px;
    --al-comment-line: 1px solid var(--al-comment-border);
}