:root {
    /* Background colors */
    --bg-primary: #0f1117;        /* page / root background */
    --bg-secondary: #161821;     /* cards, nav, modals, sheets */
    --bg-tertiary: #1e2030;      /* inputs, inner elements, active pills */
    --bg-elevated: #222530;      /* subtle separators, action bar borders */
    --bg-hover: #1e2030;         /* hover state on nav links, dropdown items */

    /* Text colors */
    --text-primary: #f0f0f0;     /* headings, usernames, strong labels */
    --text-secondary: #a0a3b1;   /* form labels, secondary info */
    --text-muted: #5a5d6e;       /* timestamps, counts, placeholders */

    /* Orange accent colors */
    --accent-primary: #e8524a;   /* buttons, active dots, badges, FAB */
    --accent-secondary: #c0392b; /* gradient end on buttons / avatars */
    --accent-tertiary: #ff6622;  /* (reserved hover escalation) */
    --accent-subtle: rgba(232, 82, 74, 0.12);  /* badge backgrounds, active pill bg */
    --accent-hover: rgba(232, 82, 74, 0.4);    /* border-color on hover */

    /* Accent glow (used on avatars, active dots, FAB shadows) */
    --accent-glow-sm: 0 0 6px rgba(232, 82, 74, 0.5);
    --accent-glow-md: 0 0 10px rgba(232, 82, 74, 0.3);
    --accent-glow-lg: 0 0 12px rgba(232, 82, 74, 0.35);

    /* Accent gradient (avatars, buttons, FAB) */
    --accent-gradient: linear-gradient(135deg, #e8524a, #c0392b);

    /* Blue accent (comment avatars, active comment toggle) */
    --accent-blue: #5b9bd5;
    --accent-blue-subtle: rgba(91, 155, 213, 0.08);
    --accent-blue-border: rgba(91, 155, 213, 0.25);

    /* Borders and dividers */
    --border-primary: #2a2d3a;   /* card borders, input borders, nav borders */
    --border-secondary: #252838; /* comment bubble borders */

    /* Gradient divider (used between post header and body) */
    --divider-gradient: linear-gradient(90deg, transparent, #2a2d3a 30%, #2a2d3a 70%, transparent);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 6px 28px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);   /* modals */
    --shadow-accent: 0 4px 18px rgba(232, 82, 74, 0.32);  /* accent buttons */
    --shadow-accent-sm: 0 3px 14px rgba(232, 82, 74, 0.3);

    /* Backdrop (modals, filter sheets) */
    --backdrop: rgba(0, 0, 0, 0.6);
    --backdrop-blur: blur(4px);

    /* Ambient page glows */
    --glow-orange: radial-gradient(circle, rgba(232, 82, 74, 0.07) 0%, transparent 70%);
    --glow-blue: radial-gradient(circle, rgba(91, 155, 213, 0.05) 0%, transparent 70%);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-spring: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Border radius */
    --radius-sm: 8px;            /* action buttons, option pills */
    --radius-md: 10px;           /* inputs, dropdown items */
    --radius-lg: 14px;           /* sidebar cards */
    --radius-xl: 16px;           /* post cards, profile card */
    --radius-pill: 20px;         /* badges, round pills */
    --radius-full: 9999px;       /* avatars (circle) */
}