/* ============================================
   HOUSLER DESIGN SYSTEM
   Version: 1.0
   Theme: Black & White Premium
   ============================================ */

:root {
    /* === COLORS === */

    /* Base */
    --black: #000000;
    --white: #FFFFFF;

    /* Grays */
    --gray-900: #1A1A1A;
    --gray-800: #333333;
    --gray-700: #4A4A4A;
    --gray-600: #6B7280;
    --gray-500: #9CA3AF;
    --gray-400: #D1D5DB;
    --gray-300: #E5E7EB;
    --gray-200: #F3F4F6;
    --gray-100: #F9FAFB;

    /* Functional Colors - for alerts and states */
    --success: #4ADE80;
    --error: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;

    /* === TYPOGRAPHY === */

    /* Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;

    /* Font Sizes */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* === SPACING === */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* === EFFECTS === */

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.3);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === BORDERS === */

    --border-width: 1px;
    --border-width-thick: 2px;
    --border-width-accent: 4px;
    --border-color: var(--gray-300);
    --border-color-dark: var(--gray-700);
    --border-radius: 0; /* Sharp edges for minimal design */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    /* Legacy variables for backward compatibility */
    --gray-light: #F5F5F5;
    --gray-medium: #999999;
    --gray-dark: #333333;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* === ALIASES === */
    /* Aliases for landing.css compatibility */
    --color-text: var(--black);
    --color-text-light: var(--gray-600);
    --color-border: var(--gray-300);
    --color-bg: var(--white);
    --color-bg-gray: var(--gray-100);
    --color-accent: var(--black);

    /* Aliases for unified-minimal.css compatibility */
    --color-black: var(--black);
    --color-white: var(--white);
    --color-gray-light: var(--gray-100);
    --color-gray-border: var(--gray-300);
    --color-gray-text: var(--gray-600);

    /* Border aliases */
    --border-thin: 1px solid var(--black);
    --border-thin-gray: 1px solid var(--gray-300);
}

/* === BASE COMPONENT STYLES === */

/* Buttons */
.btn-primary {
    background: var(--black);
    color: var(--white);
    border: var(--border-width-thick) solid var(--black);
    padding: 12px 24px;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-primary);
}

.btn-primary:hover {
    background: var(--white);
    color: var(--black);
}

.btn-secondary {
    background: var(--white);
    color: var(--black);
    border: var(--border-width-thick) solid var(--black);
    padding: 12px 24px;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-primary);
}

.btn-secondary:hover {
    background: var(--black);
    color: var(--white);
}

/* Cards */
.card {
    background: var(--white);
    border: var(--border-width) solid var(--border-color);
    padding: var(--spacing-lg);
}

.card-dark {
    background: var(--black);
    color: var(--white);
    border: var(--border-width) solid var(--border-color-dark);
}

/* Utility Classes */
.text-black { color: var(--black); }
.text-white { color: var(--white); }
.text-gray { color: var(--gray-600); }

.bg-black { background-color: var(--black); }
.bg-white { background-color: var(--white); }
.bg-gray { background-color: var(--gray-100); }