/* ============================================

   REBULDIO - PREMIUM DESIGN SYSTEM

   High-end, minimalistic, Apple-inspired aesthetic

   ============================================ */



/* CSS Variables - Premium Color Palette */

:root {

    /* Premium Color Palette */

    --primary: #F06418;

    --primary-hover: #D05514;

    --primary-light: #FEF0E7;

    --primary-gradient: linear-gradient(135deg, #F06418 0%, #D05514 100%);

    

    --secondary: #6EE7B7;

    --secondary-hover: #34D399;

    --secondary-light: #D1FAE5;

    

    /* Extended Palette */

    --success: #10B981;

    --error: #EF4444;

    --warning: #F06418;

    

    /* Premium Neutral Palette */

    --gray-50: #F9FAFB;

    --gray-100: #F3F4F6;

    --gray-200: #E5E7EB;

    --gray-300: #D1D5DB;

    --gray-400: #9CA3AF;

    --gray-500: #6B7280;

    --gray-600: #4B5563;

    --gray-700: #374151;

    --gray-800: #1F2937;

    --gray-900: #111827;

    

    /* Text - Refined Typography */

    --text-primary: #111827;

    --text-secondary: #6B7280;

    --text-muted: #9CA3AF;

    --text-white: #FFFFFF;

    

    /* Background - Minimalist & Clean */

    --bg-primary: #FFFFFF;

    --bg-secondary: #F9FAFB;

    --bg-tertiary: #F3F4F6;

    --bg-overlay: rgba(255, 255, 255, 0.8);

    

    /* Border - Soft & Subtle */

    --border-color: #E5E7EB;

    --border-color-dark: #D1D5DB;

    --border-color-light: rgba(229, 231, 235, 0.5);

    

    /* Spacing - Generous & Premium */

    --spacing-xs: 0.25rem;     /* 4px */

    --spacing-sm: 0.5rem;      /* 8px */

    --spacing-md: 1rem;        /* 16px */

    --spacing-lg: 2rem;        /* 32px */

    --spacing-xl: 3rem;        /* 48px */

    --spacing-2xl: 4rem;       /* 64px */

    --spacing-3xl: 6rem;       /* 96px */

    --spacing-4xl: 8rem;       /* 128px */

    

    /* Border Radius - Soft & Smooth */

    --radius-sm: 0.5rem;       /* 8px */

    --radius-md: 0.75rem;      /* 12px */

    --radius-lg: 1rem;         /* 16px */

    --radius-xl: 1.5rem;       /* 24px */

    --radius-2xl: 2rem;        /* 32px */

    --radius-full: 9999px;

    

    /* Shadows - Soft & Elevated */

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);

    --shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.08);

    --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.10);

    --shadow-xl: 0 20px 48px -8px rgba(0, 0, 0, 0.12);

    --shadow-2xl: 0 32px 64px -12px rgba(0, 0, 0, 0.14);

    

    /* Glows - Subtle Premium Highlights */

    --glow-primary: 0 0 32px rgba(240, 100, 24, 0.15);

    --glow-secondary: 0 0 32px rgba(110, 231, 183, 0.15);

    

    /* Typography */

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;

    

    /* Transitions - Smooth & Premium */

    --transition-fast: 200ms 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);

    

    /* Container Widths */

    --container-sm: 640px;

    --container-md: 768px;

    --container-lg: 1024px;

    --container-xl: 1280px;

}



/* Reset & Base */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    font-size: 16px;

    scroll-behavior: smooth;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



body {

    font-family: var(--font-sans);

    color: var(--text-primary);

    background-color: var(--bg-secondary);

    line-height: 1.6;

    letter-spacing: -0.01em;

    overflow-x: hidden;

}



/* Container - Premium Spacing */

.container {

    width: 100%;

    max-width: var(--container-xl);

    margin-left: auto;

    margin-right: auto;

    padding-left: 2rem;

    padding-right: 2rem;

    overflow: visible;

}



/* Responsive Typography & Container */

@media (max-width: 480px) {

    html {

        font-size: 15px;

    }

    

    .container {

        padding-left: 1rem;

        padding-right: 1rem;

    }

    

    h1 {

        font-size: 2.25rem;

        line-height: 1.15;

    }

    

    h2 {

        font-size: 1.75rem;

    }

    

    h3 {

        font-size: 1.3rem;

    }

    

    p {

        font-size: 0.95rem;

    }

}



@media (min-width: 481px) and (max-width: 768px) {

    .container {

        padding-left: 1.5rem;

        padding-right: 1.5rem;

    }

    

    h1 {

        font-size: 2.75rem;

    }

    

    h2 {

        font-size: 2rem;

    }

}



@media (min-width: 769px) and (max-width: 1024px) {

    .container {

        max-width: 960px;

    }

}



@media (min-width: 1025px) and (max-width: 1440px) {

    .container {

        max-width: 1200px;

    }

}



@media (min-width: 1441px) {

    .container {

        max-width: 1400px;

    }

}



/* Typography - Premium & Refined */

h1, h2, h3, h4, h5, h6 {

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -0.02em;

    color: var(--text-primary);

}



h1 {

    font-size: 3.5rem;

    font-weight: 700;

    line-height: 1.1;

}



h2 {

    font-size: 2.5rem;

    margin-bottom: var(--spacing-lg);

}



h3 {

    font-size: 1.875rem;

    margin-bottom: var(--spacing-md);

}



h4 {

    font-size: 1.5rem;

}



p {

    font-size: 1.0625rem;

    line-height: 1.7;

    color: var(--text-secondary);

}



.text-large {

    font-size: 1.25rem;

    line-height: 1.7;

}



.text-lead {

    font-size: 1.125rem;

    color: var(--text-secondary);

    line-height: 1.8;

}



/* Buttons - Premium Design */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    padding: 0.875rem 2rem;

    font-size: 0.9375rem;

    font-weight: 500;

    line-height: 1.5;

    text-decoration: none;

    border: none;

    border-radius: var(--radius-lg);

    cursor: pointer;

    transition: all var(--transition-base);

    white-space: nowrap;

    letter-spacing: -0.01em;

}



.btn-primary {

    background: var(--primary-gradient);

    color: white;

    box-shadow: 0 4px 16px rgba(240, 100, 24, 0.25);

}



.btn-primary:hover {

    box-shadow: 0 8px 24px rgba(240, 100, 24, 0.35);

    transform: translateY(-2px);

}



.btn-primary:active {

    transform: translateY(0);

}



.btn-secondary {

    background-color: var(--bg-primary);

    color: var(--text-primary);

    border: 1.5px solid var(--border-color-dark);

    box-shadow: var(--shadow-sm);

}



.btn-secondary:hover {

    background-color: var(--gray-50);

    border-color: var(--gray-400);

    box-shadow: var(--shadow-md);

    transform: translateY(-1px);

}



.btn-danger {

    background-color: #ef4444;

    color: white;

    border: none;

    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);

}



.btn-danger:hover {

    background-color: #dc2626;

    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);

    transform: translateY(-1px);

}



.btn-danger:active {

    transform: translateY(0);

}



.btn-ghost {

    background-color: transparent;

    color: var(--primary);

    border: 1.5px solid transparent;

}



.btn-ghost:hover {

    background-color: var(--primary-light);

    border-color: var(--primary-light);

}



.btn-lg {

    padding: 1.125rem 2.5rem;

    font-size: 1.0625rem;

}



.btn-sm {

    padding: 0.625rem 1.25rem;

    font-size: 0.875rem;

}



/* Cards - Premium Elevation */

.card {

    background-color: var(--bg-primary);

    border: 1px solid var(--border-color-light);

    border-radius: var(--radius-xl);

    padding: var(--spacing-xl);

    box-shadow: var(--shadow-sm);

    transition: all var(--transition-base);

}



.card:hover {

    box-shadow: var(--shadow-lg);

    transform: translateY(-4px);

    border-color: rgba(240, 100, 24, 0.2);

}



.card-premium {

    background: linear-gradient(135deg, rgba(240, 100, 24, 0.03) 0%, rgba(110, 231, 183, 0.03) 100%);

    border: 1px solid rgba(240, 100, 24, 0.15);

    box-shadow: var(--shadow-md), var(--glow-primary);

}



/* Grid System */

.grid {

    display: grid;

    gap: var(--spacing-lg);

}



.grid-cols-2 {

    grid-template-columns: repeat(2, 1fr);

}



.grid-cols-3 {

    grid-template-columns: repeat(3, 1fr);

}



.grid-cols-4 {

    grid-template-columns: repeat(4, 1fr);

}



@media (max-width: 1024px) {

    .grid-cols-3, .grid-cols-4 {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    .grid-cols-2, .grid-cols-3, .grid-cols-4 {

        grid-template-columns: 1fr;

    }

}



/* Utilities */

.flex-between {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.text-center {

    text-align: center;

}



.text-primary {

    color: var(--text-primary);

}



.text-secondary {

    color: var(--text-secondary);

}



.text-muted {

    color: var(--text-muted);

}



.text-gradient {

    background: var(--primary-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Spacing Utilities */

.mb-xs { margin-bottom: var(--spacing-xs); }

.mb-sm { margin-bottom: var(--spacing-sm); }

.mb-md { margin-bottom: var(--spacing-md); }

.mb-lg { margin-bottom: var(--spacing-lg); }

.mb-xl { margin-bottom: var(--spacing-xl); }

.mb-2xl { margin-bottom: var(--spacing-2xl); }

.mb-3xl { margin-bottom: var(--spacing-3xl); }

.mb-4xl { margin-bottom: var(--spacing-4xl); }



.mt-xs { margin-top: var(--spacing-xs); }

.mt-sm { margin-top: var(--spacing-sm); }

.mt-md { margin-top: var(--spacing-md); }

.mt-lg { margin-top: var(--spacing-lg); }

.mt-xl { margin-top: var(--spacing-xl); }

.mt-2xl { margin-top: var(--spacing-2xl); }

.mt-3xl { margin-top: var(--spacing-3xl); }



.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }

.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }

.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }

.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }

.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }

.py-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }

.py-4xl { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }



/* Section - Premium Spacing */

.section {

    padding: var(--spacing-4xl) 0;

}



.section-sm {

    padding: var(--spacing-3xl) 0;

}



@media (max-width: 768px) {

    .section {

        padding: var(--spacing-3xl) 0;

    }

    

    .section-sm {

        padding: var(--spacing-2xl) 0;

    }

}



/* Badge */

.badge {

    display: inline-flex;

    align-items: center;

    padding: 0.375rem 0.875rem;

    font-size: 0.8125rem;

    font-weight: 500;

    border-radius: var(--radius-full);

    letter-spacing: 0.01em;

}



.badge-primary {

    background-color: var(--primary-light);

    color: var(--primary-hover);

}



.badge-secondary {

    background-color: var(--secondary-light);

    color: var(--secondary-hover);

}



.badge-success {

    background-color: #D1FAE5;

    color: var(--success);

}



/* Animations */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.animate-fade-in-up {

    animation: fadeInUp 0.6s ease forwards;

}



/* Focus States - Accessibility */

*:focus-visible {

    outline: 2px solid var(--primary);

    outline-offset: 3px;

    border-radius: var(--radius-sm);

}



button:focus-visible,

a:focus-visible {

    outline: 2px solid var(--primary);

    outline-offset: 3px;

}