/*
Theme Name:   Joliesac Theme
Theme URI:    https://joliesac.com
Author:       Joliesac
Author URI:   https://joliesac.com
Description:  A minimalist, elegant WooCommerce theme inspired by Savoy. Clean typography, AJAX navigation, and a refined shopping experience.
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  joliesac-theme
Tags:         woocommerce, e-commerce, minimalist, ajax, clean, modern, responsive
*/

/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */
:root {
    /* Typography */
    --js-font-size-xs:    12px;
    --js-font-size-sm:    14px;
    --js-font-size-md:    16px;
    --js-font-size-lg:    18px;
    --js-font-size-xl:    24px;
    --js-font-size-2xl:   32px;
    --js-font-size-3xl:   48px;

    /* Colours */
    --js-color-body:           #777777;
    --js-color-strong:         #282828;
    --js-color-accent:         #DC9814;
    --js-color-border:         #E5E5E5;
    --js-color-divider:        #CCCCCC;
    --js-color-bg:             #FFFFFF;
    --js-color-bg-alt:         #F5F5F5;
    --js-color-bg-product:     #EEEEEE;
    --js-color-btn:            #FFFFFF;
    --js-color-btn-bg:         #282828;
    --js-color-btn-bg-hover:   #444444;
    --js-color-footer-bar-bg:  #282828;
    --js-color-footer-bar-text:#AAAAAA;
    --js-color-top-bar-bg:     #F5F5F5;
    --js-color-top-bar-text:   #555555;

    /* Spacing */
    --js-spacing-xs:  8px;
    --js-spacing-sm:  16px;
    --js-spacing-md:  24px;
    --js-spacing-lg:  48px;
    --js-spacing-xl:  80px;

    /* Border radius */
    --js-radius-sm:   4px;
    --js-radius-md:   8px;
    --js-radius-lg:   12px;

    /* Transitions */
    --js-transition: 0.25s ease;

    /* Layout */
    --js-max-width:       1280px;
    --js-header-height:   64px;
    --js-header-height-sm: 60px;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'MaisonNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--js-font-size-sm);
    font-weight: 400;
    color: var(--js-color-body);
    background: var(--js-color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--js-color-strong); text-decoration: none; transition: color var(--js-transition); }
a:hover { color: var(--js-color-accent); }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
input, textarea, select {
    border: 1px solid var(--js-color-border);
    border-radius: var(--js-radius-sm);
    padding: 10px 14px;
    width: 100%;
    outline: none;
    transition: border-color var(--js-transition);
}
input:focus, textarea:focus, select:focus { border-color: var(--js-color-strong); }

h1, h2, h3, h4, h5, h6 {
    color: var(--js-color-strong);
    font-weight: 400;
    line-height: 1.2;
}
h1 { font-size: var(--js-font-size-3xl); }
h2 { font-size: var(--js-font-size-2xl); }
h3 { font-size: var(--js-font-size-xl); }
h4 { font-size: var(--js-font-size-lg); }
h5, h6 { font-size: var(--js-font-size-md); }

p { margin-bottom: var(--js-spacing-sm); }
p:last-child { margin-bottom: 0; }

blockquote {
    font-size: var(--js-font-size-lg);
    color: var(--js-color-strong);
    padding: var(--js-spacing-md) var(--js-spacing-lg);
    border-left: 3px solid var(--js-color-accent);
}