/*
Theme Name: LucentUI WordPress
Theme URI: https://docs.zaqua.studio/lucentui
Author: AquaGeprek
Author URI: https://docs.zaqua.studio
Description: A modern and sleek WordPress blog theme based on LucentUI, designed to enhance user experience with a focus on gaming and server hosting aesthetics.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lucentui-wp
Tags: blog, one-column, two-columns, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

/* =============================================================================
   FONT DEFINITIONS
   ============================================================================= */

@font-face {
    font-family: 'Figtree';
    src: url('../fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
    unicode-range: U+0000-00FF;
    font-style: normal;
    font-weight: 200 800;
}

/* =============================================================================
   ROOT VARIABLES - THEME COLORS
   ============================================================================= */

:root {
    /* Branding Colors */
    --color-primary: 222 100% 50%;
    --color-secondary: 217 100% 69%;

    /* Neutral Colors */
    --color-neutral: 210 20% 80%;

    /* Text Colors */
    --color-base: 0 0% 10%;
    --color-muted: 200 25% 35%;
    --color-inverted: 0 0% 100%;

    /* State Colors */
    --color-success: 142 71% 45%;
    --color-error: 0 72% 51%;
    --color-warning: 45 93% 47%;
    --color-inactive: 0 0% 60%;
    --color-info: 217 91% 60%;

    /* Background Colors */
    --color-background: 0 0% 98%;
    --color-background-secondary: 0 0% 95%;

    /* Font Family */
    --font-sans: "Figtree", "Poppins", "Nunito", ui-sans-serif, system-ui, sans-serif;
}

/* Dark Mode Colors */
.dark {
    --color-primary: 222 100% 50%;
    --color-secondary: 45 90% 60%;
    --color-neutral: 210 20% 25%;
    --color-base: 0 0% 95%;
    --color-muted: 200 25% 40%;
    --color-inverted: 0 0% 20%;
    --color-background: 220 30% 10%;
    --color-background-secondary: 220 25% 15%;
}

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

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background-color: hsl(var(--color-background));
    color: hsl(var(--color-base));
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: hsl(var(--color-primary));
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: hsl(var(--color-secondary));
}

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

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.container {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================================================
   ANIMATIONS
   ============================================================================= */

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

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

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-down {
    animation: fadeInDown 0.6s ease-out forwards;
}

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

/* =============================================================================
   WORDPRESS SPECIFIC STYLES
   ============================================================================= */

/* Alignment */
.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

/* WordPress Block Styles */
.wp-block-image {
    margin-bottom: 1.5rem;
}

.wp-block-quote {
    border-left: 4px solid hsl(var(--color-primary));
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: hsl(var(--color-muted));
}

/* Screen reader text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Sticky post badge */
.sticky {
    position: relative;
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus styles */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid hsl(var(--color-primary));
    outline-offset: 2px;
}