/* CSS FOR USER FACING PAGES */

:root {
    /* ROOT COLOURS */
    --color-primary-bg: #82C3F8;           
    --color-secondary-bg: #f5f5f7;         
    --color-surface: #ffffff;              
    --color-text-primary: #000000;         
    --color-text-secondary: #4b5563;       
    --color-text-light: rgba(0, 0, 0, 0.8); 
    --color-text-muted: #a0a0a0;           
    --color-border-light: rgba(0, 0, 0, 0.05);

    /* ROOT TYPOGRAPHY */
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 600;

    /* FONT SIZES */
    --font-size-title: 3rem; 
    --font-size-subtitle: 2rem; 

    /* GLASS COLOURS */

    /* GLASS COLOURS */
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-bg-dark: rgba(0, 0, 0, 0.48);
    --glass-blur: blur(10px);

    /* OPACITY */
    --opacity-hover: 0.6;
    --opacity-focus: 0.8;
}

container {
    max-width: 100%;
    display: flex;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-primary-bg);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* TYPOGRAPHY */

.font-serif {
    font-family: var(--font-serif);
}

.font-sans {
    font-family: var(--font-sans);
}

.font-light {
    font-weight: var(--font-light);
}

.font-medium {
    font-weight: var(--font-medium);
}

.font-bold {
    font-weight: var(--font-bold);
}

/* FONT SIZES */
.title {
    font-size: var(--font-size-title);
}

.subtitle {
    font-size: var(--font-size-subtitle);
}

/* COLOURS */

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

.text-gray-500 {
    color: var(--color-text-secondary);
}

.text-gray-600 {
    color: var(--color-text-muted);
}

.bg-primary {
    background-color: var(--color-primary-bg);
}

.bg-secondary {
    background-color: var(--color-secondary-bg);
}

.bg-white {
    background-color: var(--color-surface);
}

.border-gray-100 {
    border-color: var(--color-border-light);
}

/* SEMI-TRANSPARENT EFFECTS */

.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

.glass-dark {
    background: var(--glass-bg-dark);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

/* HOVER EFFECTS */

.hover\:opacity-60:hover {
    opacity: var(--opacity-hover);
}

.hover\:opacity-80:hover {
    opacity: var(--opacity-focus);
}

/* TRANSITIONS */

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }