:root {
    --primary-color: #3b80ff;
    --accent-color: #3b80ff;
    --brand-blue: #3b80ff;
    --brand-blue-hover: #2966cc;
    --brand-orange: #ff8054;
    --brand-orange-hover: #e06a42;
    --brand-yellow: #ffaa45;
    --brand-gray: #eeece1;
    --brand-dark-gray: #555555;

    /* Standardized Grayscale Tokens */
    --gray-bg-subtle: #f9f9f9;
    --gray-chip: #f0f0f0;
    --gray-chip-hover: #e8e8e8;
    --gray-border: #ddd;
    --gray-border-subtle: #eee;
    --gray-text-main: #333;
    --gray-text-alt: #666;
    --gray-text-hint: #999;
    --brand-blue-20: rgba(59, 128, 255, 0.2);
    --brand-blue-10: rgba(59, 128, 255, 0.1);
    --brand-orange-20: rgba(255, 128, 84, 0.2);
    --brand-orange-10: rgba(255, 128, 84, 0.1);
    --gray-bg-hover: #fafbff;

    --brand-alert: #ff4d4f;
    --brand-alert-hover: #ff7875;
    --brand-alert-bg: #fff1f0;
    --brand-success: #26bc94;

    --bg-color: var(--gray-chip);
    --border-color: var(--gray-border);
    --text-color: var(--gray-text-main);

    /* Surface & Shadow Tokens (Rule 11) ⚖️🎨 */
    --card-bg: #ffffff;
    --card-bg-muted: #fbfcfc;
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.10);
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.10);

    /* Typography Tokens */
    --font-family: 'Raleway', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
}