/*
Theme Name: Fumique
Theme URI: https://fumique.com
Description: Custom luxury WooCommerce child theme for Fumique, built on Botiga.
Author: Fumique
Author URI: https://fumique.com
Template: botiga
Version: 0.1.1
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: fumique
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   FUMIQUE DESIGN SYSTEM

   We do not sell perfume.
   We sell presence.

   Brand Values:
   - Elegant
   - Self-confident
   - Mysterious
   - Premium
   - Authentic
   - Calm
========================================================================== */

:root {

    /* ==========================================================================
       COLORS
    ========================================================================== */

    --color-background: #F8F6F2;
    --color-surface: #FFFFFF;

    --color-primary: #2E2622;
    --color-secondary: #B89B5E;

    --color-cta: #A8854C;
    --color-cta-hover: #8E6F3F;

    --color-text: #2E2622;
    --color-text-muted: #5A4F45;

    --color-border: #E6DDD2;

    --color-success: #3D7A4A;
    --color-warning: #C67D00;
    --color-error: #B33A3A;

    --color-focus: #A8854C;

    /* ==========================================================================
       TYPOGRAPHY
    ========================================================================== */

    --font-heading:
        "Cormorant Garamond",
        Georgia,
        serif;

    --font-body:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    --font-hero: 64px;
    --font-h1: 56px;
    --font-h2: 42px;
    --font-h3: 30px;
    --font-h4: 24px;

    --font-body-size: 18px;
    --font-small: 15px;

    --font-price: 22px;
    --font-cta: 17px;

    /* ==========================================================================
       LAYOUT
    ========================================================================== */

    --container-width: 1320px;
    --content-width: 860px;

    /* ==========================================================================
       SPACING SYSTEM
    ========================================================================== */

    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-120: 120px;
    --space-160: 160px;

    /* ==========================================================================
       BORDER RADIUS
    ========================================================================== */

    --radius-input: 12px;
    --radius-button: 14px;
    --radius-card: 18px;
    --radius-product: 18px;
    --radius-hero: 24px;

    /* ==========================================================================
       SHADOWS
    ========================================================================== */

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08);

    /* ==========================================================================
       MOTION
    ========================================================================== */

    --transition: 0.25s ease;

    /* ==========================================================================
       Z-INDEX
    ========================================================================== */

    --z-header: 100;
    --z-dropdown: 200;
    --z-modal: 1000;
}

/* ==========================================================================
   RESET / BASE
========================================================================== */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;

    background-color: var(--color-background);
    color: var(--color-text);

    font-family: var(--font-body);
    font-size: var(--font-body-size);
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

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

button,
input,
select,
textarea {
    font: inherit;
}

/* ==========================================================================
   TYPOGRAPHY FOUNDATION
========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    color: var(--color-primary);
    font-family: var(--font-heading);
    line-height: 1.15;
    font-weight: 600;
}

h1 {
    font-size: var(--font-h1);
}

h2 {
    font-size: var(--font-h2);
}

h3 {
    font-size: var(--font-h3);
}

h4 {
    font-size: var(--font-h4);
}

p {
    margin-top: 0;
}

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

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}