:root {
    --primary-color: #d32f2f;
    --primary-darker: #b71c1c;
    --primary-red: #d32f2f;
    --accent-color-1: #222;
    --accent-color-2: #1a1a1a;
    --dark-red: #b71c1c;
    --text-dark: #212121;
    --text-medium: #424242;
    --text-light: #f8f9fa;
    --primary-gradient: linear-gradient(135deg, #ff6b6b 0%, #d32f2f 50%, #b71c1c 100%);
    --light-red-gradient: linear-gradient(135deg, #fff5f5 0%, #ffebee 100%);
    --secondary-gradient: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
    --accent-light: #ffcdd2;
    --accent-lighter: #ffebee;
    --medium-red: #ef5350;
    --light-red: #ff6b6b;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --dark-gray: #5d5d5d;
    --border-color: #e0e0e0;
    --shadow-light: rgba(211, 47, 47, 0.1);
    --shadow-medium: rgba(211, 47, 47, 0.15);
    --success-color: #28a745;
    --error-color: #d32f2f;
    --input-bg: rgba(255, 255, 255, 0.9);
    --light-red-bg: #ffebee;
    --pale-red: #ffebee;
    --page-bg: #f9f9f9;
    --card-bg: #ffffff;
    --surface-bg: #f8f9fa;
    --success: #28a745;
    --success-bg: #d4edda;
    --success-text: #155724;
    --warning: #ffc107;
    --warning-bg: #fff3cd;
    --warning-text: #856404;
    --info: #17a2b8;
    --info-bg: #d1ecf1;
    --info-text: #0c5460;
    --neutral-bg: #e2e3e5;
    --neutral-text: #383d41;
    /* Primary */
    --primary: #d32f2f;
    --primary-dark: #b71c1c;
    --primary-soft: #f8d7da;
    /* Surface */
    --card-border: #e6eaf2;
    --tag-bg: #f1f1f1;
    /* Text */
    --text-main: #212529;
    --text-muted: #555;
    /* =========================
   Semantic (USE THESE)
========================= */
    /* Brand */
    --brand-primary: var(--primary);
    --brand-primary-dark: var(--primary-dark);
    --brand-primary-soft: var(--primary-soft);
    /* States */
    --state-hover-bg: color-mix(in srgb, var(--primary) 8%, white);
    --state-active-bg: color-mix(in srgb, var(--primary) 15%, white);
    --state-focus-ring: color-mix(in srgb, var(--primary) 40%, transparent);
    /* Borders */
    --border-soft: color-mix(in srgb, var(--primary) 25%, transparent);
    --border-strong: color-mix(in srgb, var(--primary) 45%, transparent);
    /* Backgrounds */
    --surface-soft: color-mix(in srgb, var(--primary) 6%, white);
    --surface-soft-strong: color-mix(in srgb, var(--primary) 12%, white);
    --surface-selected: color-mix(in srgb, var(--primary) 18%, white);
    --shadow-color: 0, 0, 0; /* default */

    --shadow-xs: 0 2px 6px rgba(var(--shadow-color), .06);
    --shadow-sm: 0 4px 12px rgba(var(--shadow-color), .08);
    --shadow-md: 0 8px 20px rgba(var(--shadow-color), .12);
    --shadow-lg: 0 20px 40px rgba(var(--shadow-color), .18);
    /* Buttons */
    --btn-primary-bg: var(--primary);
    --btn-primary-bg-hover: var(--primary-dark);
    --btn-primary-text: #fff;
    --btn-outline-border: var(--primary);
    --btn-outline-text: var(--primary-dark);
    --btn-outline-bg-hover: var(--primary);
    --btn-outline-text-hover: #fff;
    /* Primary tones */
    --primary-color-dark: var(--primary-dark);
    --primary-color-light: var(--primary);
    /* Highlight / Accent */
    --highlight-color: var(--primary);
    /* Text */
    --text-emphasis-color: var(--text-main);
    --text-secondary-color: var(--text-muted);
    /* Borders */
    --border-color-light: var(--border-soft);
    /* Backgrounds */
    --background-lighter: var(--surface-soft);
}

.text-primary {
    color: var(--primary) !important;
}

/* Buttons */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-outline-primary:hover {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: #fff !important;
}

.btn-outline-primary {
    border-color: var(--primary-red);
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s;
}

.btn-outline-primary {
    color: var(--primary-red);
    border-color: var(--primary-red);
}

.btn-outline-primary:hover {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: white;
}

.btn-success, .btn-outline-success, .btn-outline-secondary, .btn-outline-warning, .btn-outline-danger {
    padding: 12px 30px !important;
}

.hero-side {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 245, 245, 0.9) 100%);
}

.form-side {
    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
}