/* 
 * Royal Apex Stylesheet
 * Custom styles for Premium Minimalist Design.
 * All standard layout styling uses Tailwind CSS classes, while layout 
 * fine-tuning, custom font loads, and micro-animations are defined here.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --font-outfit: 'Outfit', sans-serif;
    --color-primary-50: #f3f6f5;
    --color-primary-100: #e3eae7;
    --color-primary-600: #1b4d43;
    --color-primary-700: #133932;
    --color-primary-800: #0d2823;
    --color-accent: #d4af37; /* Metallic gold accent color */
}

body {
    font-family: var(--font-outfit), system-ui, -apple-system, sans-serif;
    background-color: #fafbfc;
    color: #1a2321;
}

/* Premium micro-animations for user interaction */
.hover-lift {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(27, 77, 67, 0.15);
}

/* Custom interactive touch target limits to prevent mis-clicks on mobile */
.btn-touch-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Accessibility styling focus indicator */
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 1px;
}