/* Color System */
:root {
    /* Base HSL Values for easy manipulation */
    --brand-hue: 215;
    --brand-sat: 90%;

    /* Primary Colors (Deep Blue/Navy for Trust & Industry) */
    --primary-50: hsl(var(--brand-hue), var(--brand-sat), 95%);
    --primary-100: hsl(var(--brand-hue), var(--brand-sat), 90%);
    --primary-500: hsl(var(--brand-hue), var(--brand-sat), 45%);
    /* Main Brand Color */
    --primary-600: hsl(var(--brand-hue), var(--brand-sat), 35%);
    --primary-700: hsl(var(--brand-hue), var(--brand-sat), 25%);
    --primary-900: hsl(var(--brand-hue), var(--brand-sat), 15%);

    /* Accent Colors (Warm wood tones / Orange for call to action) */
    --accent-500: #e67e22;
    --accent-600: #d35400;

    /* Neutral Colors */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Semantic Variables */
    --primary-color: var(--primary-500);
    --primary-hover: var(--primary-600);

    --secondary-color: var(--gray-800);

    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;

    /* Backgrounds */
    --bg-body: #ffffff;
    --bg-surface: var(--gray-50);
    --bg-card: #ffffff;

    /* Text */
    --text-primary: var(--gray-800);
    --text-heading: var(--gray-900);
    --text-body: var(--gray-600);
    --text-muted: var(--gray-500);
    --text-light: #ffffff;

    /* Borders */
    --border-color: var(--gray-200);
    --border-focus: var(--primary-500);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.dark-mode {
    --bg-body: var(--gray-900);
    --bg-surface: var(--gray-800);
    --bg-card: var(--gray-800);
    --text-primary: var(--gray-100);
    --text-heading: #ffffff;
    --text-body: var(--gray-300);
    --border-color: var(--gray-700);
}