@layer base {
    :root {
        --danger: #e53e3e;
        --success: #276749;
        --success-bg: #f0fff4;
        --success-border: #c6f6d5;
        --steel-50: #f8f9fa;
        --steel-100: #f1f3f5;
        --steel-200: #e9ecef;
        --steel-300: #dee2e6;
        --steel-400: #ced4da;
        --steel-500: #adb5bd;
        --steel-600: #6c757d;
        --steel-700: #495057;
        --steel-800: #343a40;
        --steel-900: #212529;
        --gold-50: #fef9ee;
        --gold-700: #a67c1e;
        --text: var(--steel-800);
        --text-light: var(--steel-600);
        --bg: #ffffff;
        --bg-alt: #f8f9fa;
        --border: #e9ecef;
        --radius: 8px;
        --radius-lg: 12px;
        --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
        --shadow: 0 4px 16px rgba(0,0,0,.08);
        --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
        --transition: .3s cubic-bezier(.4,0,.2,1);
        --max-w: 1280px;
    }
}