:root {
    /* Base colors from palette */
    --green: #58cc02;
    --lime: #89e219;
    --gray: #4b4b4b;
    --blue: #4b93e1;
    --lightblue: #1cb0f6;
    --red: #ff4b4b;
    --orange: #ff9600;
    --purple: #ce82ff;

    /* Semantic aliases */
    --accent-color: var(--blue);
    --success-color: var(--green);
    --warning-color: var(--orange);
    --error-color: var(--red);

    /* UI colors */
    --bg-color: #1e1e1e;
    --card-bg: #2a2a2a;
    --text-color: #e0e0e0;
    --border-color: #444;
    --code-bg: #1a1a1a;

    /* Syntax highlighting - using palette */
    --syntax-keyword: var(--blue);
    --syntax-string: var(--lime);
    --syntax-number: var(--purple);
    --syntax-function: var(--green);
    --syntax-comment: var(--gray);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;

    /* Typography */
    --font-main: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    /* --font-mono: monospace; */
    --font-mono: "JetBrains Mono", monospace;
    ;


    /* Misc */
    --border-radius: 8px;
}