:root {
    /* BRAND */
    --color-primary: #2563EB; /* Main brand blue */
    --color-primary-light: #60A5FA; /* Hover, subtle accents */
    --color-primary-dark: #1E3A8A; /* Active states, deep contrast */
    --color-primary-soft: rgba(37, 99, 235, 0.08); /* Light backgrounds */

    /* SECONDARY BRAND ACCENTS */
    --color-accent-green: #10B981; /* Success, confirmations */
    --color-accent-green-light: #6EE7B7;
    --color-accent-gold: #F59E0B; /* Warnings, attention */
    --color-accent-gold-light: #FCD34D;

    /* NEUTRALS */
    --color-bg: #F9FAFB; /* Page background */
    --color-surface: #FFFFFF; /* Cards, blocks */
    --color-surface-alt: #F3F4F6; /* Subtle section backgrounds */

    --color-text: #1F2937; /* Primary text */
    --color-text-secondary: #4B5563; /* Metadata, subheadings */
    --color-text-muted: #6B7280; /* Low emphasis */

    --color-border: #E5E7EB; /* Light borders */
    --color-border-strong: #D1D5DB; /* Stronger separators */

    /* TYPOGRAPHY */
    --font-family-base: 'Georgia Pro', 'Times New Roman', serif;
    --font-family-heading: 'Georgia Pro', 'Times New Roman', serif;
    --font-size-base: 1rem;
    --line-height-base: 1.5;

    /* SPACING SCALE */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem;  /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem;    /* 16px */
    --space-5: 1.5rem;  /* 24px */
    --space-6: 2rem;    /* 32px */
    --space-7: 2.5rem;  /* 40px */

    /* BUTTONS */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-bg-hover: var(--color-primary-light);
    --btn-primary-border: var(--color-primary-dark);
    --btn-primary-text: #FFFFFF;
    --btn-secondary-bg: var(--color-surface);
    --btn-secondary-bg-hover: var(--color-surface-alt);
    --btn-secondary-text: var(--color-text);

    /* INPUTS */
    --input-bg: #FFFFFF;
    --input-border: var(--color-border);
    --input-border-focus: var(--color-primary);
    --input-text: var(--color-text);

    /* CARDS */
    --card-bg: var(--color-surface);
    --card-border: var(--color-border);
    --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);

    /* SEMANTIC */
    --color-success: #10B981;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-warning: #F59E0B;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-error: #DC2626;
    --color-error-bg: rgba(220, 38, 38, 0.1);
    --color-info: #2563EB;
    --color-info-bg: rgba(37, 99, 235, 0.1);

    /* STATES */
    --focus-ring: 0 0 0 0.1rem #ffffff, 0 0 0 0.25rem rgba(37, 99, 235, 0.35);
    --divider-color: var(--color-border-strong);
    --code-color: #c02d76;
}