/* Global CSS Variables with Scaling System */
:root {
    /* Scaling System */
    --scale-factor: 1; /* Master scale control */
    --desktop-scale: var(--scale-factor);
    --tablet-scale: calc(var(--scale-factor) * 1.2); /* 20% larger on tablets */
    --mobile-scale: calc(var(--scale-factor) * 1.5); /* 50% larger on mobile */
    
    /* Default scale to use (changes in media queries) */
    /* --current-scale: var(--desktop-scale); */
    --current-scale: calc(var(--desktop-scale) * 0.7);
    
    /* Supporting Neutrals */
    --neutral-100: #ffffff;
    --neutral-200: #f5f5f5;
    --neutral-300: #e6e7e8;
    --neutral-400: #d3d3d3;
    --neutral-500: #bcbcbc;
    --neutral-600: #8a8a8a;
    --neutral-700: #555555;
    --neutral-800: #333333;
    --neutral-900: #1a1a1a;    
    
    /* Typography - Using scaling system with viewport units */
    --font-primary: 'HarmonyOS Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-secondary: font-family: 'Michroma', sans-serif;
    --font-tertiary: font-family: 'IBM Plex Sans', sans-serif;
    --font-size-base: calc(var(--current-scale) * (1vw + 0.5vh + 0.2vmin));
    --font-size-xs: calc(var(--current-scale) * (0.7vw + 0.35vh + 0.15vmin));
    --font-size-xs-plus: calc(var(--current-scale) * (0.8vw + 0.4vh + 0.165vmin));    
    --font-size-sm: calc(var(--current-scale) * (0.9vw + 0.45vh + 0.18vmin));
    --font-size-md: calc(var(--current-scale) * (1.1vw + 0.55vh + 0.22vmin));
    --font-size-lg: calc(var(--current-scale) * (1.5vw + 0.75vh + 0.3vmin));
    --font-size-xl: calc(var(--current-scale) * (2vw + 1vh + 0.4vmin));
    --font-size-xxl: calc(var(--current-scale) * (2.5vw + 1.25vh + 0.5vmin));
    
    /* Line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    
    /* Spacing - Using scaling system with viewport units */
    --spacing-xs: calc(var(--current-scale) * (0.5vw + 0.25vh));
    --spacing-sm: calc(var(--current-scale) * (1vw + 0.5vh));
    --spacing-md: calc(var(--current-scale) * (2vw + 1vh));
    --spacing-lg: calc(var(--current-scale) * (4vw + 2vh));
    
    /* Container Width - Proportional to viewport */
    --container-width: 92%;
    --container-max-width: 100%;
    
    /* Transitions */
    --transition-speed: 0.3s;
    
    /* Shadows - New additions */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-round: 9999px;
}

/* Font display states */
.fonts-loading {
    /* Apply fallback font metrics during loading */
}

.fonts-loaded {
    /* Ensure smooth rendering once fonts are loaded */
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-dark);
    background-color: var(--bg-light);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed);
}

a:hover {
    color: var(--primary);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container */
.container {
    width: var(--container-width);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* Headings with viewport-based sizing */
h1 {
    font-size: var(--font-size-xxl);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-tight);
}

h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-tight);
}

h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
    line-height: var(--line-height-tight);
}

/* Buttons */
.button, 
.hero-button, 
.contact-button {
    display: inline-block;
    padding: calc(var(--current-scale) * (0.6vw + 0.3vh)) calc(var(--current-scale) * (1.2vw + 0.6vh));
    background-color: var(--primary);
    color: var(--text-light);
    border-radius: calc(var(--current-scale) * (0.15vw + 0.08vh));
    font-size: var(--font-size-sm);
    transition: all var(--transition-speed);
    cursor: pointer;
    border: none;
    text-align: center;
}

.button:hover, 
.hero-button:hover, 
.contact-button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

/* Feature items styling */
.feature-item {
    position: relative;
    padding-left: 2em;
    margin-bottom: 1em;
}

.feature-item:before {
    content: "\f058"; /* Font Awesome check-circle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.25em;
    color: var(--primary);
    font-size: 1.2em;
}

/* Card styling */
.card {
    background-color: var(--bg-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

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

.text-light {
    color: var(--text-light);
}

.text-dark {
    color: var(--text-dark);
}

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

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

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

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

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

.hidden {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Animation keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Animation utility classes */
.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
}

/* Animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Placeholders for index.php */
.hero-placeholder {
    height: 70vh;
    min-height: 50vh;
    background-color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light);
    padding: var(--spacing-md);
}

.hero-content {
    max-width: 80vw;
}

.hero-content h1 {
    font-size: var(--font-size-xxl);
    margin-bottom: var(--spacing-sm);
}

.hero-content p {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-md);
}

.content-placeholder {
    padding: var(--spacing-lg) 0;
    background-color: var(--bg-gray);
    text-align: center;
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: calc(var(--current-scale) * (1.25vw + 0.625vh));
    right: calc(var(--current-scale) * (1.25vw + 0.625vh));
    background-color: var(--primary);
    color: var(--text-light);
    width: calc(var(--current-scale) * (2.5vw + 1.25vh));
    height: calc(var(--current-scale) * (2.5vw + 1.25vh));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed), visibility var(--transition-speed), transform var(--transition-speed);
    z-index: 99;
    box-shadow: var(--shadow-sm);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.arrow-up {
    display: block;
    width: calc(var(--current-scale) * (0.6vw + 0.3vh));
    height: calc(var(--current-scale) * (0.6vw + 0.3vh));
    border-top: calc(var(--current-scale) * (0.12vw + 0.06vh)) solid var(--text-light);
    border-left: calc(var(--current-scale) * (0.12vw + 0.06vh)) solid var(--text-light);
    transform: rotate(45deg);
}

/* Media Queries - Switch scale factors based on device size */
@media (max-width: 768px) {
    :root {
        --current-scale: var(--tablet-scale);
    }
    
    .container {
        width: 92%;
    }
    .back-to-top {
        width: calc(var(--current-scale) * (20px)) !important;
        height: calc(var(--current-scale) * (20px)) !important;
        bottom: calc(var(--current-scale) * (10px)) !important;
        right: calc(var(--current-scale) * (10px)) !important;
    }
}

@media (max-width: 480px) {
    :root {
        --current-scale: var(--mobile-scale) * 1.2;
    }
}

@media (min-width: 1800px) {
    :root {
        /* For very large screens, can use a smaller scale if desired */
        --current-scale: calc(var(--desktop-scale) * 0.7);
    }
}