/**
 * Variáveis CSS — Design System v5 "TREVOS"
 * Fortunna Lusitanos Theme
 *
 * Este ficheiro é a fonte canónica de todas as variáveis CSS do tema.
 * É carregado como o primeiro stylesheet (antes de style.css) para garantir
 * que as variáveis estão disponíveis para todos os outros ficheiros CSS.
 *
 * IMPORTANTE: As variáveis marcadas com [CUSTOMIZER] são sobrescritas
 * dinamicamente pelo inc/customizer.php via <style> inline no wp_head.
 * Não remover — são os valores padrão que o Customizer usa como fallback.
 *
 * Organização:
 *  0. @font-face (self-hosted — Cinzel + Raleway)
 *  1. Paleta de Cores
 *  2. Tipografia
 *  3. Layout e Espaçamento
 *  4. Animações e Transições
 *  5. Sombras
 *  6. Filtros de Imagem
 *  7. Z-index
 *  8. Componentes Específicos (nav, hero, cards, etc.)
 *
 * @package FortunnaLusitanosTheme
 * @since   1.0.0
 */

/* ════════════════════════════════════════════════════════════════════════════
   0. @FONT-FACE — SELF-HOSTED
   Fontes servidas do próprio domínio (RGPD-friendly, sem dependência CDN).
   Ficheiros WOFF2 em assets/fonts/, subconjuntos latin + latin-ext.
   Cinzel e Raleway são fontes variáveis — um único ficheiro cobre a gama de
   pesos declarada em font-weight (ex.: 400 700 = qualquer peso entre 400 e 700).
════════════════════════════════════════════════════════════════════════════ */

/* Cinzel — latin */
@font-face {
    font-family: 'Cinzel';
    src: url('../fonts/cinzel-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cinzel — latin-ext */
@font-face {
    font-family: 'Cinzel';
    src: url('../fonts/cinzel-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Raleway — latin */
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-latin.woff2') format('woff2');
    font-weight: 200 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Raleway — latin-ext */
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-latin-ext.woff2') format('woff2');
    font-weight: 200 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Raleway — latin (italic) */
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-italic-latin.woff2') format('woff2');
    font-weight: 200 300;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Raleway — latin-ext (italic) */
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-italic-latin-ext.woff2') format('woff2');
    font-weight: 200 300;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ════════════════════════════════════════════════════════════════════════════
   1. PALETA DE CORES
   Amostrada directamente do logótipo original da Fortunna Lusitanos.
════════════════════════════════════════════════════════════════════════════ */

:root {

    /* ── Champanhe — cor de acento principal [CUSTOMIZER: fl_color_champagne] */
    --fl-champagne:            #D8CAAF;
    --fl-champagne-lt:         #EDE5D5;  /* Champanhe claro — hovers subtis */
    --fl-champagne-bg:         #F5F1EA;  /* Champanhe de fundo — superfícies quentes */
    --fl-champagne-pale:       rgba(216, 202, 175, 0.13);  /* Champanhe muito transparente */
    --fl-champagne-border:     rgba(216, 202, 175, 0.38);  /* Bordas e separadores */
    --fl-champagne-border-lt:  rgba(216, 202, 175, 0.20);  /* Bordas muito subtis */
    --fl-champagne-border-dk:  rgba(216, 202, 175, 0.65);  /* Bordas mais visíveis */

    /* ── Noir — quase-preto quente (não frio) [CUSTOMIZER: fl_color_noir] */
    --fl-noir:                 #141210;  /* Noir puro */
    --fl-noir-mid:             #2A2620;  /* Noir médio — texto sobre fundo claro */
    --fl-noir-light:           #443D35;  /* Noir light — subtítulos, labels */
    --fl-noir-dim:             rgba(20, 18, 16, 0.72);   /* Noir para texto editorial */
    --fl-noir-muted:           rgba(20, 18, 16, 0.55);   /* Noir para texto secundário */
    --fl-noir-faint:           rgba(20, 18, 16, 0.25);   /* Noir para bordas suaves */

    /* ── Branco quente — superfícies claras [CUSTOMIZER: fl_color_white] */
    --fl-white:                #FDFCFA;  /* Branco quente puro */
    --fl-off-white:            #F7F4EF;  /* Off-white — alternância de secções */
    --fl-linen:                #EDE8DF;  /* Linen — bordas e separadores claros */

    /* ── Stone — neutro médio */
    --fl-stone:                #6E675A;  /* Stone — texto secundário. Era #B0A898 (2,3:1); ≥4,5:1 em branco, champanhe-bg e linen (1.5.3) */
    --fl-stone-dim:            rgba(176, 168, 152, 0.5);
    --fl-stone-light:          rgba(176, 168, 152, 0.20);

    /* ── Aliases para o Customizer — sobrescritas por inc/customizer.php */
    --fl-color-champagne:      var(--fl-champagne);
    --fl-color-noir:           var(--fl-noir);
    --fl-color-white:          var(--fl-white);

    /* ── Cores de estado */
    --fl-success:              #4CAF50;
    --fl-success-bg:           #E8F5E9;
    --fl-success-border:       rgba(76, 175, 80, 0.35);
    --fl-warning:              #FF9800;
    --fl-warning-bg:           #FFF8E1;
    --fl-warning-border:       rgba(255, 152, 0, 0.35);
    --fl-error:                #F44336;
    --fl-error-bg:             #FFEBEE;
    --fl-error-border:         rgba(244, 67, 54, 0.35);

    /* ── Cores para badges de estado de cavalos */
    --fl-badge-disponivel-bg:     #E8F5E9;
    --fl-badge-disponivel-color:  #2E7D32;
    --fl-badge-disponivel-border: #A5D6A7;
    --fl-badge-reservado-bg:      #FFF8E1;
    --fl-badge-reservado-color:   #B23C00;
    --fl-badge-reservado-border:  #FFE082;
    --fl-badge-vendido-bg:        #FCE4EC;
    --fl-badge-vendido-color:     #C62828;
    --fl-badge-vendido-border:    #EF9A9A;
    --fl-badge-plantel-bg:        #F5F1EA;
    --fl-badge-plantel-color:     #6B5B3E;
    --fl-badge-plantel-border:    #D8CAAF;
    --fl-badge-prep-bg:           #E8EEF6;  /* Em preparação — 8:1 */
    --fl-badge-prep-color:        #2C4A6E;
    --fl-badge-prep-border:       #B5C7DD;
    --fl-badge-repro-bg:          #141210;  /* Reprodutor(a) — champanhe sobre noir, 11:1 */
    --fl-badge-repro-color:       #D8CAAF;
    --fl-badge-repro-border:      rgba(216, 202, 175, 0.55);

    /* ── Etiquetas sobre fotos (1.5.7) — placa noir, cor do estado só no ponto.
       Texto #EDE3CF sobre noir .72 ≥ 5:1 mesmo sobre foto branca. */
    --fl-tag-bg:                  rgba(20, 18, 16, 0.72);
    --fl-tag-color:               #EDE3CF;
    --fl-tag-rule:                rgba(216, 202, 175, 0.28);
    --fl-tag-avail:               #9DB385;  /* sálvia */
    --fl-tag-reserv:              #D4AE6E;  /* ocre */
    --fl-tag-sold:                #B4715F;  /* terracota */
    --fl-tag-own:                 #D8CAAF;  /* champanhe */
    --fl-tag-prep:                #9AA9BC;  /* ardósia */

    /* ── Overlay escuro para fotos */
    --fl-overlay-light:        rgba(20, 18, 16, 0.35);
    --fl-overlay-mid:          rgba(20, 18, 16, 0.58);
    --fl-overlay-heavy:        rgba(20, 18, 16, 0.82);
    --fl-overlay-hero:         rgba(20, 18, 16, 0.62);

    /* ── Aliases MA Media standard — consumidos por mamedia-blocks */
    --bg:                      var(--fl-white);
    --surface:                 var(--fl-off-white);
    --border:                  var(--fl-champagne-border);
    --text:                    var(--fl-noir);
    /* --font-heading e --font-body definidas na secção 2 (Tipografia) */

}

/* ════════════════════════════════════════════════════════════════════════════
   2. TIPOGRAFIA
   Cinzel (gravada, romana) + Raleway (ultra-light, sans-serif)
════════════════════════════════════════════════════════════════════════════ */

:root {

    /* ── Famílias de fontes [CUSTOMIZER: fl_font_heading / fl_font_body] */
    --fl-font-heading:         'Cinzel', 'Times New Roman', Georgia, serif;
    --fl-font-body:            'Raleway', system-ui, -apple-system, sans-serif;
    --fl-font-mono:            ui-monospace, 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

    /* ── Aliases MA Media standard — consumidos por mamedia-blocks */
    --font-heading:            var(--fl-font-heading);
    --font-body:               var(--fl-font-body);

    /* ── Tamanhos de fonte — escala modular (ratio 1.25) */
    --fl-text-2xs:             0.65rem;    /*  ~10px */
    --fl-text-xs:              0.75rem;    /*  12px  */
    --fl-text-sm:              0.875rem;   /*  14px  */
    --fl-text-base:            1rem;       /*  16px  [CUSTOMIZER: fl_font_size_base] */
    --fl-text-lg:              1.125rem;   /*  18px  */
    --fl-text-xl:              1.25rem;    /*  20px  */
    --fl-text-2xl:             1.5rem;     /*  24px  */
    --fl-text-3xl:             1.875rem;   /*  30px  */
    --fl-text-4xl:             2.25rem;    /*  36px  */
    --fl-text-5xl:             3rem;       /*  48px  */
    --fl-text-6xl:             3.75rem;    /*  60px  */
    --fl-text-7xl:             4.5rem;     /*  72px  */
    --fl-text-8xl:             6rem;       /*  96px  */

    /* ── Letter spacing */
    --fl-tracking-tightest:   -0.04em;
    --fl-tracking-tighter:    -0.02em;
    --fl-tracking-tight:      -0.02em;
    --fl-tracking-normal:      0;
    --fl-tracking-wide:        0.06em;
    --fl-tracking-wider:       0.12em;
    --fl-tracking-heading:     0.04em;    /* Títulos Cinzel */
    --fl-tracking-widest:      0.28em;
    --fl-tracking-ultra:       0.22em;    /* Eyebrows, meta labels */
    --fl-tracking-label:       0.38em;    /* Labels tipo "COUDELARIA · PSL" */
    --fl-tracking-spread:      0.55em;    /* Sub-logótipo "LUSITANOS" */

    /* ── Line heights */
    --fl-leading-none:         1;
    --fl-leading-tightest:     0.88;      /* Títulos hero grandes */
    --fl-leading-tight:        1.1;      /* Títulos */
    --fl-leading-snug:         1.35;
    --fl-leading-normal:       1.6;
    --fl-leading-relaxed:      1.75;
    --fl-leading-loose:        1.9;
    --fl-leading-looser:       1.9;       /* Corpo editorial */

    /* ── Pesos de fonte */
    --fl-weight-thin:          200;
    --fl-weight-light:         300;      /* Padrão para Raleway [CUSTOMIZER] */
    --fl-weight-normal:        400;
    --fl-weight-medium:        500;
    --fl-weight-semibold:      600;
    --fl-weight-bold:          700;

}

/* ════════════════════════════════════════════════════════════════════════════
   3. LAYOUT E ESPAÇAMENTO
════════════════════════════════════════════════════════════════════════════ */

:root {

    /* ── Contentor */
    --fl-max-w:                1320px;   /* Largura máxima [CUSTOMIZER: fl_max_width] */
    --fl-max-w-narrow:         820px;    /* Coluna de leitura */
    --fl-max-w-mid:            1060px;   /* Contentor médio */
    --fl-max-w-article:        760px;    /* Coluna de artigo */

    /* ── Padding lateral adaptativo */
    --fl-pad:                  clamp(1.5rem, 5.5vw, 6rem);
    --fl-pad-sm:               clamp(1rem, 3vw, 2.5rem);
    --fl-pad-lg:               clamp(2rem, 8vw, 9rem);

    /* ── Altura da navegação [CUSTOMIZER: fl_nav_height] */
    --fl-admin-bar-h: 0px;  /* compensação da admin bar WP */
    --fl-nav-h:                80px;
    --fl-nav-h-mobile:         66px;

    /* ── Gap (espaçamentos de grid) */
    --fl-gap-2xs:              0.5rem;
    --fl-gap-xs:               0.75rem;
    --fl-gap-sm:               1rem;
    --fl-gap-md:               1.5rem;
    --fl-gap-lg:               clamp(2rem, 4vw, 3rem);
    --fl-gap-xl:               clamp(3rem, 6vw, 5rem);
    --fl-gap-2xl:              clamp(4rem, 8vw, 7rem);
    --fl-gap-section:          clamp(5rem, 10vw, 9rem);
    --fl-gap-hero:             clamp(6rem, 12vw, 11rem);

    /* ── Border radius */
    --fl-radius-none:          0;
    --fl-radius-xs:            2px;
    --fl-radius-sm:            2px;
    --fl-radius:               4px;
    --fl-radius-md:            6px;
    --fl-radius-lg:            12px;
    --fl-radius-xl:            20px;
    --fl-radius-full:          9999px;

    /* ── Border width */
    --fl-border:               1px solid var(--fl-linen);
    --fl-border-champagne:     1px solid var(--fl-champagne-border);
    --fl-border-noir:          1px solid rgba(20, 18, 16, 0.12);

    /* ── Inset frame (efeito no interior das fotos) */
    --fl-inset-frame:          10px;

}

/* ════════════════════════════════════════════════════════════════════════════
   4. ANIMAÇÕES E TRANSIÇÕES
════════════════════════════════════════════════════════════════════════════ */

:root {

    /* ── Easing curves */
    --fl-ease:                 cubic-bezier(0.16, 1, 0.3, 1);       /* Spring premium */
    --fl-ease-soft:            cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Soft ease-out */
    --fl-ease-in:              cubic-bezier(0.4, 0, 1, 1);           /* Ease in */
    --fl-ease-out:             cubic-bezier(0, 0, 0.2, 1);           /* Ease out */
    --fl-ease-in-out:          cubic-bezier(0.4, 0, 0.2, 1);         /* Ease in-out */
    --fl-ease-bounce:          cubic-bezier(0.34, 1.56, 0.64, 1);    /* Leve bounce */

    /* ── Durações */
    --fl-dur-instant:          0.1s;
    --fl-dur-fast:             0.15s;
    --fl-dur:                  0.3s;
    --fl-dur-medium:           0.5s;
    --fl-dur-slow:             0.65s;
    --fl-dur-slower:           0.9s;
    --fl-dur-slowest:          1.1s;

    /* ── Transições pré-construídas */
    --fl-transition:           var(--fl-duration) var(--fl-ease-soft);
    --fl-transition-fast:      var(--fl-dur-fast) var(--fl-ease-soft);
    --fl-transition-slow:      var(--fl-dur-slow) var(--fl-ease);
    --fl-transition-color:     color var(--fl-dur) var(--fl-ease-soft),
                               background-color var(--fl-dur) var(--fl-ease-soft),
                               border-color var(--fl-dur) var(--fl-ease-soft);
    --fl-transition-transform: transform var(--fl-dur-slow) var(--fl-ease);
    --fl-transition-opacity:   opacity var(--fl-dur-slower) var(--fl-ease);

    /* ── Reveal (scroll animations) */
    --fl-reveal-distance-y:    22px;
    --fl-reveal-distance-x:    28px;
    --fl-reveal-dur:           var(--fl-dur-slower);
    --fl-reveal-ease:          var(--fl-ease);

    /* ── Delays escalonados */
    --fl-delay-1:              0.1s;
    --fl-delay-2:              0.22s;
    --fl-delay-3:              0.34s;
    --fl-delay-4:              0.46s;
    --fl-delay-5:              0.58s;

    /* ── Ken Burns (hero slideshows) */
    --fl-kb-scale-start:       1.04;
    --fl-kb-scale-end:         1;
    --fl-kb-dur:               6s;

}

/* ════════════════════════════════════════════════════════════════════════════
   5. SOMBRAS
════════════════════════════════════════════════════════════════════════════ */

:root {

    --fl-shadow-xs:            0 1px 2px  rgba(20, 18, 16, 0.06);
    --fl-shadow-sm:            0 1px 3px rgba(20, 18, 16, 0.08);
    --fl-shadow:               0 2px 8px rgba(20, 18, 16, 0.1);
    --fl-shadow-md:            0 4px 16px rgba(20, 18, 16, 0.1);
    --fl-shadow-lg:            0 8px 32px rgba(20, 18, 16, 0.12);
    --fl-shadow-xl:            0 16px 64px rgba(20, 18, 16, 0.14);
    --fl-shadow-2xl:           0 24px 96px rgba(20, 18, 16, 0.16);

    /* Sombra champanhe — para cards hover */
    --fl-shadow-champ:         0 6px 32px rgba(216, 202, 175, 0.18);
    --fl-shadow-champ-lg:      0 12px 48px rgba(216, 202, 175, 0.25);

    /* Sombra interna */
    --fl-shadow-inset:         inset 0 1px 3px rgba(20, 18, 16, 0.08);

    /* Sombra do nav scrolled */
    --fl-nav-shadow:           0 1px 0 var(--fl-linen);

}

/* ════════════════════════════════════════════════════════════════════════════
   6. FILTROS DE IMAGEM
   Estilo editorial champanhe — fotografia P&B quente do design system v5
════════════════════════════════════════════════════════════════════════════ */

:root {

    /* ── Filtros principais */
    --fl-img-filter:           grayscale(35%) brightness(0.88) sepia(10%);
    --fl-img-filter-hover:     grayscale(20%) brightness(0.92) sepia(7%);
    --fl-img-filter-hero:      grayscale(55%) brightness(0.58) sepia(18%);
    --fl-img-filter-hero-soft: grayscale(40%) brightness(0.72) sepia(12%);
    --fl-img-filter-card:      grayscale(30%) brightness(0.90) sepia(10%);
    --fl-img-filter-gallery:   grayscale(45%) brightness(0.82) sepia(12%);
    --fl-img-filter-thumb:     grayscale(32%) brightness(0.88) sepia(10%);

}

/* ════════════════════════════════════════════════════════════════════════════
   7. Z-INDEX
   Escala nomeada para evitar conflitos entre componentes
════════════════════════════════════════════════════════════════════════════ */

:root {

    --fl-z-below:    -1;
    --fl-z-base:      0;
    --fl-z-raised:    1;     /* Elementos dentro de cards com hover */
    --fl-z-above:     1;
    --fl-z-dropdown: 100;   /* Dropdowns de menu */
    --fl-z-sticky:   200;   /* Headers e filtros sticky */
    --fl-z-overlay:  300;   /* Overlays sobre conteúdo */
    --fl-z-modal:    400;   /* Modais e lightboxes */
    --fl-z-nav:      500;   /* Navegação global */
    --fl-z-mmenu:    999;   /* Menu mobile (máximo visível) */
    --fl-z-toast:    600;   /* Notificações toast */
    --fl-z-grain:   9999;   /* Textura de papel (topo absoluto, pointer-events: none) */

}

/* ════════════════════════════════════════════════════════════════════════════
   8. COMPONENTES ESPECÍFICOS
   Variáveis de componente que não mudam com o Customizer
   mas que são referenciadas em múltiplos ficheiros CSS
════════════════════════════════════════════════════════════════════════════ */

:root {

    /* ── Navegação */
    --fl-nav-bg-scrolled:      rgba(253, 252, 250, 0.97);
    --fl-nav-backdrop:         blur(18px);
    --fl-nav-transition:       background 0.55s var(--fl-ease-soft),
                               box-shadow 0.55s var(--fl-ease-soft);

    /* ── Botões */
    --fl-btn-padding-y:        1rem;
    --fl-btn-padding-x:        2.4rem;
    --fl-btn-padding-y-sm:     0.75rem;
    --fl-btn-padding-x-sm:     1.75rem;
    --fl-btn-font-size:        12px;
    --fl-btn-font-size-sm:     11px;
    --fl-btn-letter-spacing:   0.18em;
    --fl-btn-border-width:     1.5px;
    --fl-btn-transition:       all 0.32s var(--fl-ease-soft);

    /* ── Cards de cavalos */
    --fl-card-border:          1px solid var(--fl-linen);
    --fl-card-radius:          0;         /* Cards sem raio — design minimal */
    --fl-card-shadow-hover:    var(--fl-shadow-lg);
    --fl-card-transform-hover: translateY(-3px);

    /* ── Pedigree */
    --fl-pedigree-sire-color:  var(--fl-champagne);
    --fl-pedigree-dam-color:   var(--fl-stone);
    --fl-pedigree-node-padding:0.85rem 1rem;

    /* ── Eyebrow labels */
    --fl-eyebrow-size:         11px;
    --fl-eyebrow-tracking:     var(--fl-tracking-label);
    --fl-eyebrow-color:        var(--fl-champagne);
    --fl-eyebrow-on-light:     #7A6544;  /* Champanhe escuro — ≥4,5:1 em branco, champanhe-bg e linen (1.5.3) */

    /* ── Secção divider com trefoil */
    --fl-divider-color:        var(--fl-linen);
    --fl-divider-margin:       3rem 0;

    /* ── Galeria strip */
    --fl-gallery-gap:          3px;
    --fl-gallery-filter:       var(--fl-img-filter-gallery);

    /* ── Formulários */
    --fl-input-border:         1px solid var(--fl-linen);
    --fl-input-focus-border:   1px solid var(--fl-champagne);
    --fl-input-focus-shadow:   0 0 0 3px var(--fl-champagne-pale);
    --fl-input-padding:        0.75rem 0;  /* Só padding vertical — sem laterais (underline style) */
    --fl-input-font-size:      14px;
    --fl-input-transition:     border-color var(--fl-dur) var(--fl-ease-soft),
                               box-shadow var(--fl-dur) var(--fl-ease-soft);

    /* ── Tabs / FAQ */
    --fl-tab-active-color:     var(--fl-noir);
    --fl-tab-active-border:    var(--fl-champagne);
    --fl-tab-font-size:        11px;
    --fl-tab-padding:          1.05rem 1.35rem;

    /* ── Accordion / FAQ */
    --fl-accordion-dur:        0.45s;
    --fl-accordion-ease:       var(--fl-ease);

    /* ── Progress bar (artigo) */
    --fl-progress-h:           2px;
    --fl-progress-color:       var(--fl-champagne);

    /* ── Lightbox */
    --fl-lightbox-bg:          rgba(20, 18, 16, 0.97);

    /* ── Footer */
    --fl-footer-bg:            var(--fl-noir);
    --fl-footer-border:        rgba(253, 252, 250, 0.06);
    --fl-footer-link-color:    rgba(253, 252, 250, 0.60);  /* era .32 (2,9:1) → 7:1 */
    --fl-footer-link-hover:    rgba(253, 252, 250, 0.65);

    /* ── Paginação */
    --fl-pag-btn-size:         38px;
    --fl-pag-btn-border:       1px solid var(--fl-linen);

}

/* ════════════════════════════════════════════════════════════════════════════
   9. BREAKPOINTS (documentação — não são media queries, são apenas valores)
   Usar diretamente nos ficheiros CSS: @media (max-width: 1100px) { }
════════════════════════════════════════════════════════════════════════════ */

/*
    Breakpoints do design system v5:
    --fl-bp-xs:    400px   (mobile pequeno)
    --fl-bp-sm:    560px   (mobile)
    --fl-bp-md:    768px   (tablet)
    --fl-bp-lg:    1100px  (tablet largo / desktop pequeno)
    --fl-bp-xl:    1320px  (desktop)
    --fl-bp-2xl:   1600px  (desktop largo)

    NOTA: CSS Custom Properties não funcionam em @media queries.
    Os breakpoints acima são apenas documentação. Usar os valores
    numéricos directamente nas media queries.
*/

/* ════════════════════════════════════════════════════════════════════════════
   10. DARK MODE (preparação futura)
   Activado com prefers-color-scheme: dark ou com classe .dark no <html>
════════════════════════════════════════════════════════════════════════════ */

/*
    Por enquanto desactivado — o tema usa modo escuro manual (secções noir)
    não escurecimento automático do sistema.

    Para activar no futuro:
    @media (prefers-color-scheme: dark) { ... }
    ou .dark { ... }
*/

/* ════════════════════════════════════════════════════════════════════════════
   11. REDUCED MOTION
   Respeita a preferência de acessibilidade do sistema operativo
════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --fl-dur-instant:   0.01ms;
        --fl-dur-fast:      0.01ms;
        --fl-dur:           0.01ms;
        --fl-dur-medium:    0.01ms;
        --fl-dur-slow:      0.01ms;
        --fl-dur-slower:    0.01ms;
        --fl-dur-slowest:   0.01ms;
        --fl-reveal-dur:    0.01ms;
        --fl-kb-dur:        0.01ms;
    }
}

:root {
    /* Vindos de style.css (1.5.3) */
    --fl-duration-fast: 0.15s;
    --fl-duration: 0.3s;
    --fl-duration-slow: 0.6s;
    --fl-duration-slower: 0.9s;
}