/*
Theme Name:  Elisa Parpinelli
Theme URI:   https://elisaparpinelli.com.br
Description: Tema WooCommerce clássico para joalheria artesanal. Visual minimalista e editorial, com paleta neutra escura e acentos terrosos.
Version:     1.0.0
Author:      Elisa Parpinelli
Author URI:  https://elisaparpinelli.com.br
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elisaparpinelli
Tags:        woocommerce, e-commerce, jewelry, handmade, one-column, two-columns, custom-menu, featured-images, footer-widgets, full-width-template
*/

/* =============================================================================
   FONTES DA MARCA – auto-hospedadas

   MADE CANNES é fonte comercial licenciada: não pode ser servida por CDN
   pública nem redistribuída fora deste tema.
   ============================================================================= */
@font-face {
    font-family: 'MADE CANNES';
    src: url('assets/fonts/2910Made-Cannes.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('assets/fonts/Barlow-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =============================================================================
   DESIGN TOKENS – CSS Custom Properties
   ============================================================================= */
:root {
    /* --- Cores principais ---
       O azul-marinho é a cor de marca de facto: aparece 41x no CSS de produção,
       contra 9x do #141414 que o kit global declara como "primary" e que quase
       não foi usado. Os tokens seguem o site renderizado, não o kit. */
    --color-primary:       #464E7E;
    --color-primary-dark:  #353b60;
    --color-primary-light: #5f6796;
    --color-primary-alpha: rgba(70, 78, 126, 0.08);

    --color-black:         #141414;
    --color-dark:          #2d2d2d;
    --color-text:          #7A7A7A;
    --color-text-muted:    #9b9b9b;

    --color-white:         #ffffff;
    --color-bg:            #f8f8f8;
    --color-bg-alt:        #f2f2f2;
    --color-border:        #e5e5e5;
    --color-border-dark:   #d0d0d0;

    /* --- Cores de marca --- */
    --color-navy:          #464E7E;
    --color-sale:          #AC443B;  /* vermelho do selo SALE */
    --color-secondary:     #54595F;
    --color-accent:        #3957FF;
    --color-olive:         #515A37;
    --color-terracotta:    #AC443C;
    --color-bordeaux:      #753438;
    --color-pine:          #324841;
    --color-forest:        #213834;
    --color-indigo:        #4C4F7C;

    /* --- Tipografia --- */
    --font-base:           'Barlow', sans-serif;
    --font-heading:        'MADE CANNES', 'Barlow', sans-serif;
    --font-size-xs:        0.75rem;    /* 12px */
    --font-size-sm:        0.875rem;   /* 14px */
    --font-size-base:      1rem;       /* 16px */
    --font-size-md:        1.125rem;   /* 18px */
    --font-size-lg:        1.25rem;    /* 20px */
    --font-size-xl:        1.5rem;     /* 24px */
    --font-size-2xl:       1.875rem;   /* 30px */
    --font-size-3xl:       2.25rem;    /* 36px */
    --font-size-4xl:       3rem;       /* 48px */

    --font-weight-light:   300;
    --font-weight-normal:  400;
    --font-weight-medium:  500;
    --font-weight-semi:    600;
    --font-weight-bold:    700;

    --line-height-tight:   1.2;
    --line-height-snug:    1.4;
    --line-height-base:    1.6;
    --line-height-relaxed: 1.8;

    /* --- Espaçamentos --- */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */

    /* --- Layout --- */
    --container-max:       1440px;
    --container-wide:      1600px;
    --container-narrow:    960px;
    --container-padding:   clamp(1rem, 4vw, 2rem);

    /* --- Border radius ---
       A marca é angular: cantos retos em botões, cards e inputs. Os degraus
       retangulares ficam em 0. --radius-full permanece redondo, reservado a
       elementos circulares por forma (avatares, badges, dots), não a estética. */
    --radius-sm:   0;
    --radius-base: 0;
    --radius-md:   0;
    --radius-lg:   0;
    --radius-xl:   0;
    --radius-full: 9999px;

    /* --- Sombras --- */
    --shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
    --shadow-xl:  0 16px 48px rgba(0,0,0,0.14);
    --shadow-primary: 0 4px 20px rgba(20, 20, 20, 0.30);

    /* --- Transições --- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* --- Z-index layers --- */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
}

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

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

body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

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

ul, ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

/* =============================================================================
   LAYOUT HELPERS
   ============================================================================= */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1;
}

/* Screen-reader utilities (WordPress padrão) */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-white);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-md);
    clip: auto;
    color: var(--color-black);
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semi);
    height: auto;
    left: var(--space-4);
    padding: var(--space-4) var(--space-6);
    top: var(--space-4);
    width: auto;
    z-index: var(--z-toast);
}