/* assets/css/tokens.css */

/* ── Fontes self-hosted (variáveis, latin + latin-ext) ──
   Bricolage Grotesque → display (títulos)
   Manrope             → texto, UI, produto                       */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/bricolage-latin.woff2') format('woff2');
  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;
}
:root {
  /* ── Cores — Brand Guidelines Vol. 01 · 2026 ── */
  --c-brand:          #0E434E;  /* Deep Teal */
  --c-brand-dark:     #072B33;  /* Midnight — hover/activo */
  --c-brand-mid:      #3A565B;  /* teal dessaturado — superfícies/ícones */
  --c-brand-light:    #C7D6D6;  /* teal claro — backgrounds subtis */
  --c-accent:         #EC6A4E;  /* Coral — acento (~10%) */
  --c-accent-dark:    #D25538;  /* Coral hover */
  --c-sage:           #7FA6AC;  /* Sage — tom de apoio */
  --c-sand:           #E7D3B3;  /* Sand — tom quente */

  --c-text:           #072B33;  /* Midnight — deixa de haver preto */
  --c-text-muted:     #3A565B;  /* texto secundário */
  --c-text-light:     #556B70;  /* escurecido de #6E8286: aquele dava 4,04:1 sobre
                                   branco e falhava AA em texto pequeno. Este dá 5,64:1,
                                   e 4,67:1 sobre o creme #EFE9DD. */  /* labels, metadados */
  --c-text-xlight:    #9DABAC;  /* placeholders activos */
  --c-text-ghost:     #C2CED0;  /* placeholders */

  --c-bg:             #FFFFFF;  /* fundo principal — branco */
  --c-surface:        #F7F4EC;  /* superfícies destacadas */
  --c-bg-alt:         #E6E0D3;  /* fundo alternativo (cream escuro) */
  --c-bg-warm:        #F5F0E6;  /* Cream */
  --c-white:          #fff;

  --c-border:         #EBE5D9;  /* hairlines de layout */
  --c-border-mid:     #D7CFBE;  /* contornos de controlos */
  --c-border-light:   #F0EBE0;  /* bordas suaves */
  --c-border-xlight:  #F5F1E9;

  --c-error:          #B84D38;  --c-error-bg:   #FAEAEA;
  --c-success:        #2D7A50;  --c-success-bg: #EAF4EC;
  --c-warning:        #9A7D30;  --c-warning-bg: #FFF3E0;

  /* ── Tipografia ── */
  --font-display: "Bricolage Grotesque", Georgia, serif;  /* h1–h3 e títulos de secção */
  --font-main:    "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --tracking-display: -0.02em;  /* títulos, −2% */
  --tracking-label:    0.16em;  /* labels uppercase, +16% */
  --lh-body:           1.6;

  /* Escala de texto */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.8125rem;  /* 13px */
  --text-md:   0.875rem;   /* 14px */
  --text-lg:   1rem;       /* 16px */
  --text-xl:   1.125rem;   /* 18px */
  --text-2xl:  1.25rem;    /* 20px */
  --text-3xl:  1.5rem;     /* 24px */
  --text-4xl:  1.75rem;    /* 28px */
  --text-5xl:  2.25rem;    /* 36px */

  /* Espacamento */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Layout */
  --container:      1440px;
  --pad-mobile:     1rem;
  --pad-tablet:     1.5rem;
  --pad-desktop:    2.5rem;
  --header-h:       64px;
  --promo-h:        36px;
  --bnav-h:         60px;

  /* ── Cantos — Brand Guidelines (escala de 5 degraus) ── */
  --r-sm:    8px;    /* miniaturas do carrinho, elementos pequenos */
  --r:       14px;   /* cards, imagens de produto, categorias */
  --r-lg:    18px;   /* imagem da PDP, resumo do checkout, drawers */
  --r-pill:  999px;  /* botões, badges, campos, contador, quantidade, filtros */
  --r-round: 50%;    /* swatches, avatares, setas do slider */

  /* Bordas — hairlines 0.5px; a distinção layout/controlo é de cor, não de largura */
  --border:         0.5px solid var(--c-border);
  --border-mid:     0.5px solid var(--c-border-mid);
  --border-light:   0.5px solid var(--c-border-light);
  --border-xlight:  0.5px solid var(--c-border-xlight);

  /* Sombras */
  --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);

  /* Transicoes */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms ease;

  /* Z-index */
  --z-bnav:    100;
  --z-mega:    190;
  --z-header:  200;
  --z-drawer:  300;
  --z-overlay: 290;
  --z-search:  310;
  --z-modal:   400;
}