/* ==========================================================================
   theme.css - Casanova Group Design System Core
   Fonts, Tokens, Typography & Global Resets
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500&display=swap');

/* 1. Local WOFF2 Font Faces */
@font-face {
    font-family: 'Source Serif 4';
    src: url('../fonts/SourceSerif4-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif 4';
    src: url('../fonts/SourceSerif4-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Alias compatibility for Source Serif Pro */
@font-face {
    font-family: 'Source Serif Pro';
    src: url('../fonts/SourceSerif4-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif Pro';
    src: url('../fonts/SourceSerif4-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

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

:root {
    /* Typography Tokens */
    --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
    --font-sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-archivo: 'Archivo', sans-serif;
    --font-code: 'Source Code Pro', monospace;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Brand Colors (Figma Papéis de cor) */
    --color-brand-grupo: #751320; /* Chip: Vino Vecchio / Âncora 600: #880922 */
    --color-brand-casanova: #8A5B3B; /* Chip & Âncora 600: Rosso Vino */
    --color-brand-casanostra: #C1FDBB; /* Chip: Verde Elettrico / Âncora 300: #A3E99D */
    --color-brand-pizza: #F81413; /* Chip: Rosso Pezzi Scuro / Âncora 600: #D81814 */
    --color-brand-neutro: #6F6A63; /* Chip Neutros: #6F6A63 */

    /* Base Colors & Figma Aliases */
    --color-base-papel: #F6F1E8;

    /* Neutral Scale (Figma Design System) */
    --color-neutral-100: #FBFAF7;
    --color-neutral-200: #F6F1E8;
    --color-neutral-300: #E8E2D6;
    --color-neutral-400: #D8D2C8;
    --color-neutral-500: #B5AFA4;
    --color-neutral-600: #8E887E;
    --color-neutral-700: #6F6A63;
    --color-neutral-800: #3A3733;
    --color-neutral-900: #111111;

    /* Grupo Scale */
    --color-grupo-100: #E1D2D2;
    --color-grupo-200: #DDC5C4;
    --color-grupo-300: #D69D9C;
    --color-grupo-400: #C57172;
    --color-grupo-500: #AC353F;
    --color-grupo-600: #880922; /* ÂNCORA */
    --color-grupo-700: #751320;
    --color-grupo-800: #510C15;
    --color-grupo-900: #30090C;

    /* Casanova Scale */
    --color-casanova-100: #FEEEE4;
    --color-casanova-200: #F3DACA;
    --color-casanova-300: #E2BDA6;
    --color-casanova-400: #C6987A;
    --color-casanova-500: #A87756;
    --color-casanova-600: #8A5B3B; /* ÂNCORA */
    --color-casanova-700: #6D4325;
    --color-casanova-800: #4E2C12;
    --color-casanova-900: #301604;

    /* Casanostra Scale */
    --color-casanostra-100: #DDFFD9;
    --color-casanostra-200: #C1FDBB;
    --color-casanostra-300: #A3E99D; /* ÂNCORA */
    --color-casanostra-400: #82CD7C;
    --color-casanostra-500: #68AA62;
    --color-casanostra-600: #51894D;
    --color-casanostra-700: #3F693B;
    --color-casanostra-800: #274424;
    --color-casanostra-900: #132312;

    /* Pizaapezzi Scale */
    --color-pizaapezzi-100: #F8E9E7;
    --color-pizaapezzi-200: #F8D9D4;
    --color-pizaapezzi-300: #F8BDB4;
    --color-pizaapezzi-400: #F89183;
    --color-pizaapezzi-500: #F81413;
    --color-pizaapezzi-600: #D81814; /* ÂNCORA */
    --color-pizaapezzi-700: #A71712;
    --color-pizaapezzi-800: #6D100B;
    --color-pizaapezzi-900: #370C08;

    /* Figma Aliases (Pizza a Pezzi) */
    --color-pizza-a-pezzi-100: var(--color-pizaapezzi-100);
    --color-pizza-a-pezzi-200: var(--color-pizaapezzi-200);
    --color-pizza-a-pezzi-300: var(--color-pizaapezzi-300);
    --color-pizza-a-pezzi-400: var(--color-pizaapezzi-400);
    --color-pizza-a-pezzi-500: var(--color-pizaapezzi-500);
    --color-pizza-a-pezzi-600: var(--color-pizaapezzi-600);
    --color-pizza-a-pezzi-700: var(--color-pizaapezzi-700);
    --color-pizza-a-pezzi-800: var(--color-pizaapezzi-800);
    --color-pizza-a-pezzi-900: var(--color-pizaapezzi-900);

    /* Accent Scale (Idêntico ao Grupo no Figma) */
    --color-acento-100: #E1D2D2;
    --color-acento-200: #DDC5C4;
    --color-acento-300: #D69D9C;
    --color-acento-400: #C57172;
    --color-acento-500: #AC353F;
    --color-acento-600: #880922; /* ÂNCORA */
    --color-acento-700: #751320;
    --color-acento-800: #510C15;
    --color-acento-900: #30090C;

    /* Functional Colors */
    --color-func-success-100: #D3F0E2;
    --color-func-success-500: #00835E;
    --color-func-success-700: #005C41;

    --color-func-aviso-100: #F6E5CF;
    --color-func-aviso-500: #9A6700;
    --color-func-aviso-700: #694500;

    --color-func-erro-100: #FFDFDC;
    --color-func-erro-500: #E70026;
    --color-func-erro-700: #940014;

    --color-func-informacao-100: #D7EAFF;
    --color-func-informacao-500: #0075CA;
    --color-func-informacao-700: #004F8B;

    /* Spacing System (Base 8px) */
    --space-2: 2px;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-120: 120px;
    --space-160: 160px;

    /* Radii */
    --radius-none: 0px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-full: 999px;

    /* Elevation / Shadows (Figma Design System) */
    --shadow-elevation-1: 0px 0px 1px rgba(28, 26, 24, 0.04), 0px 2px 6px rgba(28, 26, 24, 0.06);
    --shadow-elevation-2: 0px 2px 6px rgba(28, 26, 24, 0.05), 0px 10px 28px rgba(28, 26, 24, 0.10);
    --shadow-pousado: var(--shadow-elevation-1);
    --shadow-flutuar: var(--shadow-elevation-2);

    /* Contextual House Dynamic Tokens Default */
    --casa-acento-600: var(--color-grupo-600);
    --casaacento600: var(--casa-acento-600);
    --casa-acento-700: var(--color-grupo-700);
    --casa-acento-800: var(--color-grupo-800);
    --casa-acento-900: var(--color-grupo-900);
    --header-btn-radius: var(--radius-full);
    --header-border-bottom: var(--color-neutral-300);

    /* Button Component Tokens Default (Fluidos com clamp() Mobile First) */
    --btn-height: clamp(42px, 4.5vw, 46px);
    --btn-padding-y: clamp(12px, 1.6vw, 16px);
    --btn-padding-x: clamp(20px, 3.5vw, 32px);
    --btn-radius: 999px;
    --btn-border-width: 2px;
    --btn-font-family: var(--font-archivo, 'Archivo', sans-serif);
    --btn-font-size: clamp(13px, 1.2vw, 14px);
    --btn-bg: var(--color-neutral-200, #F6F1E8);
    --btn-border-color: var(--casa-acento-600, #880922);
    --btn-color: var(--casa-acento-600, #880922);
    --btn-shadow-color: var(--casaacento600, var(--casa-acento-600, #880922));
    --btn-shadow-normal: 2px 2px 0px 0px var(--btn-shadow-color);
    --btn-shadow-hover: 4px 4px 0px 0px var(--btn-shadow-color);
    --btn-shadow-active: 1px 1px 0px 0px var(--btn-shadow-color);
    --btn-disabled-bg: var(--color-neutral-200, #F6F1E8);
    --btn-disabled-border: var(--color-neutral-400, #D8D2C8);
    --btn-disabled-color: var(--color-neutral-500, #B5AFA4);
}

html, body {
    scroll-behavior: smooth;
}

/* ==========================================================================
   Contextual House Brand Overrides
   Permite alternar a paleta da casa ativa no body, em seções ou cards
   ========================================================================== */

/* Grupo Casanova (Vinho) */
body.context-grupo,
.context-grupo,
[data-context="grupo"] {
    --casa-acento-100: var(--color-grupo-100, #E1D2D2);
    --casa-acento-200: var(--color-grupo-200, #DDC5C4);
    --casa-acento-300: var(--color-grupo-300, #D69D9C);
    --casa-acento-400: var(--color-grupo-400, #C57172);
    --casa-acento-500: var(--color-grupo-500, #AC353F);
    --casa-acento-600: var(--color-grupo-600, #880922);
    --casaacento600: var(--casa-acento-600);
    --casa-acento-700: var(--color-grupo-700, #751320);
    --casa-acento-800: var(--color-grupo-800, #510C15);
    --casa-acento-900: var(--color-grupo-900, #30090C);
    --btn-border-color: var(--casa-acento-600);
    --btn-color: var(--casa-acento-600);
    --btn-shadow-color: var(--casa-acento-600);
    --btn-shadow-normal: 2px 2px 0px 0px var(--casa-acento-600);
    --btn-shadow-hover: 4px 4px 0px 0px var(--casa-acento-600);
    --btn-shadow-active: 1px 1px 0px 0px var(--casa-acento-600);
}

/* Casa Nostra (Verde) */
body.context-casanostra,
.context-casanostra,
[data-context="casanostra"],
.section-casanostra {
    --casa-acento-100: var(--color-casanostra-100, #DDFFD9);
    --casa-acento-200: var(--color-casanostra-200, #C1FDBB);
    --casa-acento-300: var(--color-casanostra-300, #A3E99D);
    --casa-acento-400: var(--color-casanostra-400, #82CD7C);
    --casa-acento-500: var(--color-casanostra-500, #68AA62);
    --casa-acento-600: var(--color-casanostra-700, #3F693B);
    --casaacento600: var(--casa-acento-600);
    --casa-acento-700: var(--color-casanostra-700, #3F693B);
    --casa-acento-800: var(--color-casanostra-800, #274424);
    --casa-acento-900: var(--color-casanostra-900, #132312);
    --btn-radius: 3px;
    --header-btn-radius: 3px;
    --btn-border-color: var(--casa-acento-600);
    --btn-color: var(--casa-acento-600);
    --btn-shadow-color: var(--casa-acento-600);
    --btn-shadow-normal: 2px 2px 0px 0px var(--casa-acento-600);
    --btn-shadow-hover: 4px 4px 0px 0px var(--casa-acento-600);
    --btn-shadow-active: 1px 1px 0px 0px var(--casa-acento-600);
}

/* Casanova (Caramelo) */
body.context-casanova,
.context-casanova,
[data-context="casanova"],
.section-casanova {
    --casa-acento-100: var(--color-casanova-100, #FEEEE4);
    --casa-acento-200: var(--color-casanova-200, #F3DACA);
    --casa-acento-300: var(--color-casanova-300, #E2BDA6);
    --casa-acento-400: var(--color-casanova-400, #C6987A);
    --casa-acento-500: var(--color-casanova-500, #A87756);
    --casa-acento-600: var(--color-casanova-600, #8A5B3B);
    --casaacento600: var(--casa-acento-600);
    --casa-acento-700: var(--color-casanova-700, #6D4325);
    --casa-acento-800: var(--color-casanova-800, #4E2C12);
    --casa-acento-900: var(--color-casanova-900, #301604);
    --btn-border-color: var(--casa-acento-600);
    --btn-color: var(--casa-acento-600);
    --btn-shadow-color: var(--casa-acento-600);
    --btn-shadow-normal: 2px 2px 0px 0px var(--casa-acento-600);
    --btn-shadow-hover: 4px 4px 0px 0px var(--casa-acento-600);
    --btn-shadow-active: 1px 1px 0px 0px var(--casa-acento-600);
}

/* Pizza a Pezzi (Vermelho) */
body.context-pizza,
body.context-pizza-a-pezzi,
.context-pizza,
.context-pizza-a-pezzi,
[data-context="pizza-a-pezzi"],
.section-pizza {
    --casa-acento-100: var(--color-pizaapezzi-100, #F8E9E7);
    --casa-acento-200: var(--color-pizaapezzi-200, #F8D9D4);
    --casa-acento-300: var(--color-pizaapezzi-300, #F8BDB4);
    --casa-acento-400: var(--color-pizaapezzi-400, #F89183);
    --casa-acento-500: var(--color-pizaapezzi-500, #F81413);
    --casa-acento-600: var(--color-pizaapezzi-700, #A71712);
    --casaacento600: var(--casa-acento-600);
    --casa-acento-700: var(--color-pizaapezzi-700, #A71712);
    --casa-acento-800: var(--color-pizaapezzi-800, #6D100B);
    --casa-acento-900: var(--color-pizaapezzi-900, #370C08);
    --btn-border-color: var(--casa-acento-600);
    --btn-color: var(--casa-acento-600);
    --btn-shadow-color: var(--casa-acento-600);
    --btn-shadow-normal: 2px 2px 0px 0px var(--casa-acento-600);
    --btn-shadow-hover: 4px 4px 0px 0px var(--casa-acento-600);
    --btn-shadow-active: 1px 1px 0px 0px var(--casa-acento-600);
}

/* Global Body Reset & Setup */
body {
    font-family: var(--font-sans);
    color: var(--color-neutral-900, #111111);
    background-color: var(--color-base-papel, #F6F1E8);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Standard Content Container */
.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-24);
    padding-right: var(--space-24);
}

/* Gutenberg Alignfull Support */
.alignfull,
.wp-block-group.alignfull,
.wp-block-image.alignfull,
.wp-block-cover.alignfull {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    width: 100vw !important;
}

.alignfull img {
    width: 100%;
    height: auto;
}

/* Gutenberg Alignwide Support */
.alignwide {
    margin-left: -60px;
    margin-right: -60px;
    max-width: unset;
    width: auto;
}

@media (max-width: 768px) {
    .alignwide {
        margin-left: 0;
        margin-right: 0;
    }
}

h1,
h2,
h3,
.font-serif {
    font-family: var(--font-serif);
    font-weight: var(--weight-semibold);
    margin: 0;
}

/* ==========================================================================
   DESIGN SYSTEM TYPOGRAPHY SPECIFICATIONS (Figma Design System)
   Fiel ao Figma v3 · 100% Mobile-First com clamp()
   ========================================================================== */

/* Title / Display: Só o hero. Uma vez por página, nunca duas. */
.title-display {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(52px, 7.5vw, 96px);
    line-height: 0.94; /* 94% / 90px no Figma */
    letter-spacing: -0.025em;
    color: var(--color-neutral-900, #111111);
}

/* Title / Large: Abertura de página. */
.title-large {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1; /* 100% / 64px no Figma */
    letter-spacing: -0.02em;
    color: var(--color-neutral-900, #111111);
}

/* Title / Medium: O título de secção. O cavalo de batalha do site. */
.title-medium {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(28px, 3.8vw, 44px);
    line-height: 1.06; /* 106% / 47px no Figma */
    letter-spacing: -0.015em; /* -1.5% no Figma */
    color: var(--color-neutral-900, #111111);
}

/* Title / Small: Título de cartão. */
.title-small {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(24px, 2.8vw, 32px);
    line-height: 1.12; /* 112% / 36px no Figma */
    letter-spacing: -0.01em;
    color: var(--color-neutral-900, #111111);
}

/* Subtitle / Large: O lead editorial: a frase que abre a secção. */
.subtitle-large {
    font-family: var(--font-serif);
    font-weight: 400; /* Regular no Figma */
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.20; /* 120% / 38px no Figma */
    letter-spacing: -0.01em;
    color: var(--color-neutral-900, #111111);
}

/* Subtitle / Medium: Subtítulo. */
.subtitle-medium {
    font-family: var(--font-serif);
    font-weight: 400; /* Regular no Figma */
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.28; /* 128% / 31px no Figma */
    letter-spacing: -0.005em;
    color: var(--color-neutral-900, #111111);
}

/* Body / Large: Texto corrido. Máximo 75 caracteres por linha. */
.body-large {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(18px, 1.8vw, 22px); /* 22px no Figma */
    line-height: 1.5; /* 150% / 33px no Figma */
    max-width: 684px;
    color: var(--color-neutral-900, #111111);
}

/* Body / Medium: O default do corpo. */
.body-medium {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(16px, 1.5vw, 18px); /* 18px no Figma */
    line-height: 1.5; /* 150% / 27px no Figma */
    max-width: 612px;
    color: var(--color-neutral-900, #111111);
}

/* Body / Small: Texto secundário. */
.body-small {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5; /* 150% / 24px no Figma */
    max-width: 540px;
    color: var(--color-neutral-700, #6F6A63);
}

/* Others / Buttons / Large: Botão principal. */
.button-large {
    font-family: var(--font-archivo);
    font-weight: 500;
    font-size: 14px;
    line-height: 1; /* 100% / 14px no Figma */
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-neutral-900, #111111);
}

/* Others / Buttons / Medium: Botão secundário. */
.button-medium {
    font-family: var(--font-archivo);
    font-weight: 500;
    font-size: 13px;
    line-height: 1; /* 100% / 13px no Figma */
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-neutral-900, #111111);
}

/* Others / Labels / Medium: Etiqueta de cartão. */
.label-medium {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px; /* 150% no Figma */
    letter-spacing: 0.01em;
    color: var(--color-neutral-900, #111111);
}

/* Others / Labels / Small: Etiqueta pequena. */
.label-small {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px; /* 143% no Figma */
    letter-spacing: 0.02em; /* +4% / 0.02em no Figma */
    color: var(--color-neutral-900, #111111);
}

/* Others / Data / Default: Horários, moradas, preços. */
.data-default {
    font-family: var(--font-archivo);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px; /* 154% no Figma */
    letter-spacing: -0.01em;
    color: var(--color-neutral-700, #6F6A63);
}

/* Others / Caption / Default: Legendas de foto e créditos. */
.caption-default {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px; /* 157% no Figma */
    color: var(--color-neutral-900, #111111);
}

/* Utilitários Estruturais do Design System */
.regua {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-neutral-900, #111111);
    border: none;
    margin: 0;
}

.divider-subtle {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-neutral-300, #E8E2D6);
    border: none;
    margin: 0;
}

/* ==========================================================================
   MODULAR COMPONENTS REFERENCE:
   - Botões:        assets/css/buttons.css
   - Header:        assets/css/header.css
   - Hero Home:     assets/css/hero-home.css
   - Admin Frontend: assets/css/admin-frontend.css
   ========================================================================== */