:root {
    /* ----------------------------------------------------------------------
       1. Core Color Palette (Modern Blue-Slate System)
       ---------------------------------------------------------------------- */
    /* Primary (Vibrant Blue): Action, Interaction, Focus */
    --color-primary: #2563eb;       /* Modern Vibrant Blue (Tailwind Blue-600 ish) */
    --color-primary-hover: #1d4ed8; /* Darker Blue for Hover */
    --color-primary-active: #1e40af; /* Even Darker for Active */
    
    /* Neutral (Slate): Structure, Text, Borders - Cooler, professional grey */
    --color-neutral: #64748b;       /* Slate-500: Secondary text */
    --color-neutral-hover: #475569; /* Slate-600 */
    --color-neutral-active: #334155; /* Slate-700 */
    
    /* Semantic Colors: Feedback Only (Refined for harmony) */
    --color-success: #10b981;       /* Emerald: Calmer than pure green */
    --color-success-hover: #059669;
    --color-success-active: #047857;
    
    --color-warning: #f59e0b;       /* Amber: Warm, visible */
    --color-warning-hover: #d97706;
    --color-warning-active: #b45309;
    
    --color-danger: #ef4444;        /* Red: Clear, modern */
    --color-danger-hover: #dc2626;
    --color-danger-active: #b91c1c;
    
    --color-info: #0ea5e9;          /* Sky: Distinct from primary blue */
    --color-info-hover: #0284c7;
    --color-info-active: #0369a1;

    /* ----------------------------------------------------------------------
       2. Interface Semantic Colors
       ---------------------------------------------------------------------- */
    /* Backgrounds & Surfaces */
    --body-bg: #f8fafc;           /* Slate-50: Very subtle cool grey tint */
    --surface-bg: #ffffff;        /* Pure White */
    --color-bg-subtle: #f1f5f9;   /* Slate-100: Secondary background */
    --container-bg: #ffffff;      /* Alias */
    --hover-bg-subtle: rgba(15, 23, 42, 0.04); /* Slate-900 based hover tint */
    
    /* Borders & Dividers */
    --border-color: #e2e8f0;      /* Slate-200: Subtle cool grey border */
    
    /* Typography */
    --text-primary: #0f172a;      /* Slate-900: High contrast, almost black */
    --text-secondary: #64748b;    /* Slate-500: Readable secondary text */
    --text-muted: #94a3b8;        /* Slate-400: Disabled / Placeholder */

    /* Soft/Tint Colors (Modernized) */
    --color-primary-soft-bg: #eff6ff; /* Blue-50 */
    --color-primary-soft-fg: #1e40af; /* Blue-800 */
    
    --color-success-soft-bg: #ecfdf5; /* Emerald-50 */
    --color-success-soft-fg: #065f46; /* Emerald-800 */
    
    --color-warning-soft-bg: #fffbeb; /* Amber-50 */
    --color-warning-soft-fg: #92400e; /* Amber-800 */
    
    --color-danger-soft-bg: #fef2f2;  /* Red-50 */
    --color-danger-soft-fg: #991b1b;  /* Red-800 */
    
    --color-info-soft-bg: #f0f9ff;    /* Sky-50 */
    --color-info-soft-fg: #075985;    /* Sky-800 */
    
    --color-neutral-soft-bg: #f8fafc; /* Slate-50 */
    --color-neutral-soft-fg: #475569; /* Slate-600 */

    /* ----------------------------------------------------------------------
       3. Component Specific Tokens
       ---------------------------------------------------------------------- */
    /* Callouts / Info Blocks */
    --callout-info-color: var(--color-primary);
    --callout-tip-color: var(--color-info);
    --callout-strategy-color: var(--color-success);
    --callout-concept-color: var(--color-primary-active);
    --callout-quote-color: var(--color-neutral);
    --callout-reflection-color: var(--text-primary);
    --callout-warning-color: var(--color-warning);
    --callout-danger-color: var(--color-danger);

    /* Tables */
    --table-head-bg: var(--color-bg-subtle);

    /* Shadows (Refined Layered Shadows) */
    --shadow-color: rgba(15, 23, 42, 0.08); /* Slate based shadow */
    --shadow-sm: 0 1px 2px 0 var(--shadow-color);
    --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);

    /* ----------------------------------------------------------------------
       4. Layout & Spacing
       ---------------------------------------------------------------------- */
    --page-max-width: 1200px;
    --page-padding-x: 24px;
    
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* ----------------------------------------------------------------------
       5. Legacy Compatibility Aliases (Deprecated - Do not use in new code)
       ---------------------------------------------------------------------- */
    --primary-color: var(--color-primary);
    --primary-700: var(--color-primary-hover);
    --warning-500: var(--color-warning);
    --danger-500: var(--color-danger);
    --highlight-bg: var(--hover-bg-subtle);
    --primary-green: var(--color-primary);
    --dark-green: var(--color-primary-active);
    --light-green: var(--color-primary-soft-bg);
    --secondary-color: var(--color-neutral);
    --secondary-dark-color: var(--text-secondary);
    --text-color: var(--text-primary);
    --bg-color: var(--body-bg);
}