/*
Theme Name: Owlio - The Nocturnal Editorial
Theme URI: https://owlio.in
Author: Owlio
Author URI: https://owlio.in
Description: A premium dark fashion editorial theme for Owlio. Built with Tailwind CSS. WooCommerce compatible.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: owlio
Tags: woocommerce, dark, fashion, editorial, ecommerce
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
WC requires at least: 7.0
WC tested up to: 9.0
*/

/* ============================================================
   OWLIO THEME - ROOT VARIABLES
   ============================================================ */
:root {
    --owlio-bg:            #1F1F1F;
    --owlio-surface:       #2a2a2a;
    --owlio-surface-high:  #333333;
    --owlio-surface-low:   #222222;
    --owlio-accent:        #8DBF5A;
    --owlio-accent-dark:   #72a043;
    --owlio-text:          #ffffff;
    --owlio-text-muted:    #c4c7c7;
    --owlio-border:        #444748;
    --owlio-border-light:  #333333;
    --owlio-error:         #ffb4ab;
    --owlio-radius:        2px;
    --owlio-radius-lg:     4px;
    --owlio-transition:    0.3s ease;
    --owlio-font-headline: 'Epilogue', sans-serif;
    --owlio-font-body:     'Manrope', sans-serif;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background-color: var(--owlio-bg);
    color: var(--owlio-text);
    font-family: var(--owlio-font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--owlio-font-headline);
    font-weight: 700;
    line-height: 1.1;
    color: var(--owlio-text);
}

a { color: inherit; text-decoration: none; transition: color var(--owlio-transition); }
a:hover { color: var(--owlio-accent); }

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--owlio-font-body);
}

input, textarea, select {
    font-family: var(--owlio-font-body);
    font-size: 14px;
}

/* ============================================================
   SCROLLBAR STYLING
   ============================================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--owlio-surface-low); }
::-webkit-scrollbar-thumb { background: var(--owlio-border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--owlio-accent); }

/* ============================================================
   SELECTION
   ============================================================ */
::selection { background: var(--owlio-accent); color: #1F1F1F; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.owlio-container { max-width: 1440px; margin: 0 auto; padding: 0 2rem; }
.owlio-btn-primary {
    display: inline-block;
    padding: 1.1rem 2.5rem;
    background: var(--owlio-accent);
    color: #1F1F1F;
    font-family: var(--owlio-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: var(--owlio-radius);
    transition: all 0.4s ease;
    cursor: pointer;
}
.owlio-btn-primary:hover { background: var(--owlio-accent-dark); color: #1F1F1F; filter: brightness(1.1); }

.owlio-btn-outline {
    display: inline-block;
    padding: 1.1rem 2.5rem;
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    font-family: var(--owlio-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: var(--owlio-radius);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    transition: all 0.4s ease;
    cursor: pointer;
}
.owlio-btn-outline:hover { background: rgba(255,255,255,0.15); color: #ffffff; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.text-vertical { writing-mode: vertical-rl; text-orientation: mixed; }

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    transition: color var(--owlio-transition);
}