/* Tokens do tema (decisoes-casa-asia.md, 2.12 a 2.15) */
/* ==========================================================================
   Tokens — tipografia, grelha, espaçamento (independentes do tema)
   Fluidos entre 390px e 1440px; fixos fora desse intervalo.
   ========================================================================== */
:root {
  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", Arial, Helvetica, sans-serif;

  /* Escala de tamanhos (chat 35): 120, 64, 56, 40, 36, 32, 28, 24, 20, 18, 16, 14.
     Dois valores fixos, como na intranet: o de telemóvel aqui e o de desktop a
     partir de 1024px (media query a seguir ao :root). Sem clamp(). */
  --text-120: 7.5rem;
  --text-64: 4rem;
  --text-56: 3.5rem;
  --text-40: 2.5rem;
  --text-36: 2.25rem;
  --text-32: 2rem;
  --text-28: 1.75rem;
  --text-24: 1.5rem;
  --text-20: 1.25rem;
  --text-18: 1.125rem;
  --text-16: 1rem;
  --text-14: 0.875rem;

  /* Tamanhos por uso: valor de telemóvel (o de desktop vem a partir de 1024px) */
  --text-h1-hp: var(--text-36);        /* 120 - 36, H1 em destaque (páginas institucionais e listagens, em maiúsculas) e 404 */
  --text-h1: var(--text-36);           /* 64 - 36, H1 da página inicial; pesquisa e declaração */
  --text-h1-entry: var(--text-36);     /* 56 - 36, H1 da atividade, artigo, peça e país */
  --text-h2: var(--text-32);           /* 40 - 32 */
  --text-h3: var(--text-24);           /* 28 - 24 */
  --text-slider: var(--text-18);       /* 32 - 18, título do Slider */
  --text-lead: var(--text-20);         /* 24 - 20, lead e citação */
  --text-body-xl: var(--text-18);      /* 20 - 18, títulos dos cartões, termo do glossário */
  --text-footer-contact: var(--text-24);   /* 32 - 24, email e telefone do rodapé */
  --text-body: var(--text-16);
  --text-body-md: var(--text-14);
  --text-nav: 1rem;         /* 16px, primeiro nível (C8; C 2.1: ASI #21, HOSA #33) */
  --text-subnav: 1rem;      /* 16px, submenu (A11Y-16) */
  --text-button: 1rem;      /* 16px (C8; C 2.1: ASI #21, HOSA #33) */
  --text-min: 0.875rem;     /* 14px, mínimo do site */

  --lh-heading: 1.4;   /* títulos (chat 35; antes 1.2) */
  --lh-tight: 1.2;     /* controlos que não são títulos: menu, migalhas, filtros, paginação, ligações com linha */
  --lh-body: 1.6;
  --ls-heading: -0.015em;
  --ls-body: 0.015em;
  --ls-nav: 0.3em;

  --weight-regular: 400;
  --weight-medium: 500;

  /* Espaçamento: 0, 4, 8, 16, 24, 36, 48, 64, 96, 120 */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 1rem;      /* 16 */
  --space-4: 1.5rem;    /* 24 */
  --space-5: 2.25rem;   /* 36 */
  --space-6: 3rem;      /* 48 */
  --space-7: 4rem;      /* 64 */
  --space-8: 6rem;      /* 96 */
  --space-9: 7.5rem;    /* 120 */
  /* Degraus fixos, como na intranet e no site SCML: um valor abaixo de 768px e
     outro a partir daí (media query a seguir ao :root). Sem clamp(). */
  --space-section: var(--space-8);                           /* 96px; 120px a partir de 768px, entre blocos */
  --space-block: var(--space-4);                             /* 24px; 48px a partir de 768px, dentro do bloco */
  --space-heading: var(--space-3);                           /* título → texto, 16px */
  --space-paragraph: var(--space-4);                         /* entre parágrafos, 24px */

  /* Grelha */
  --container-max: 120rem;                                   /* 1920px */
  --page-margin: var(--space-4);                             /* 24px; 48px a partir de 768px */
  --grid-columns: 4;
  --grid-gap: var(--space-3);                                /* 16px; 24px a partir de 768px */
  --measure: 41.25rem;                                       /* 660px, ±80 caracteres */

  /* Forma e interação */
  --radius-pill: 999px;      /* cápsula; equivale aos 25px medidos num botão de 44px */
  --ring-gap: 4px;           /* afastamento do segundo contorno no hover */
  --radius-round: 50%;
  --border-width: 1px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --target-min: 2.75rem;     /* 44px */
  --icon-button: 3rem;       /* 48px */
  --icon-size: 1rem;         /* 16px nos botões e ligações */
  --duration-fade: 250ms;    /* cor, fundo, opacidade: sempre */
  --duration-motion: 0s;     /* deslocamento: só sem movimento reduzido */
  --ease: ease-out;
}

@media (min-width: 48em) {
  :root {
    --grid-columns: 8;
    --space-section: var(--space-9);   /* 120 */
    --space-block: var(--space-6);     /* 48 */
    --page-margin: var(--space-6);     /* 48 */
    --grid-gap: var(--space-4);        /* 24 */
  }
}
@media (min-width: 64em) {
  :root {
    --grid-columns: 12;
    /* Tamanhos de desktop (chat 35) */
    --text-h1-hp: var(--text-120);
    --text-h1: var(--text-64);
    --text-h1-entry: var(--text-56);
    --text-h2: var(--text-40);
    --text-h3: var(--text-28);
    --text-slider: var(--text-32);
    --text-lead: var(--text-24);
    --text-body-xl: var(--text-20);
    --text-footer-contact: var(--text-32);
  }
}
@media (prefers-reduced-motion: no-preference) { :root { --duration-motion: 250ms; } }

/* ==========================================================================
   Primitivas de cor. Rampas do site SCML; neutral e yellow adaptadas ao
   Casa Ásia (chat 16). Os componentes nunca usam primitivas: usam os tokens
   semânticos abaixo. Exceções decididas: anéis do botão de reprodução e
   fundo do vídeo na lightbox (2.14).
   ========================================================================== */
:root {
  --neutral-0: #000000;
  --neutral-10: #020001;
  --neutral-20: #0C0C0C;
  --neutral-30: #16161D;
  --neutral-40: #1E1E25;
  --neutral-50: #2C2C33;
  --neutral-60: #595959;
  --neutral-70: #7F7F7F;
  --neutral-80: #A6A6A6;
  --neutral-90: #E5E5E5;
  --neutral-95: #F4F4F4;
  --neutral-99: #FCFCFC;
  --neutral-100: #FFFFFF;

  --yellow-0: #000000;
  --yellow-10: #331F00;
  --yellow-20: #664D00;
  --yellow-30: #997A00;
  --yellow-40: #CCA800;
  --yellow-50: #FFD700;
  --yellow-60: #FFD83D;
  --yellow-70: #F6D558;
  --yellow-80: #FFE388;
  --yellow-90: #FFF1C4;
  --yellow-95: #FFF8E1;
  --yellow-99: #FFFDF5;
  --yellow-100: #FFFFFF;

  --brand-0: #000000;
  --brand-10: #1F0104;
  --brand-20: #3E0208;
  --brand-30: #5D030C;
  --brand-40: #7B1118;
  --brand-50: #9A212F;
  --brand-60: #B83D4D;
  --brand-70: #CA6B77;
  --brand-80: #DC99A1;
  --brand-90: #EDC7CB;
  --brand-95: #F6E3E5;
  --brand-99: #FCF5F6;
  --brand-100: #FFFFFF;

  --blue-0: #000000;
  --blue-10: #00232A;
  --blue-20: #004653;
  --blue-30: #00697D;
  --blue-40: #008CA6;
  --blue-50: #00A8C0;
  --blue-60: #33BECD;
  --blue-70: #66D3DA;
  --blue-80: #99E3E7;
  --blue-90: #CCF1F3;
  --blue-95: #E5F8F9;
  --blue-99: #F7FCFD;
  --blue-100: #FFFFFF;

  --green-0: #000000;
  --green-10: #0A2E1A;
  --green-20: #145C33;
  --green-30: #1E8A4D;
  --green-40: #28B866;
  --green-50: #3BC97A;
  --green-60: #69D091;
  --green-70: #96D38C;
  --green-80: #B4E0B0;
  --green-90: #D2EDD4;
  --green-95: #E8F6E9;
  --green-99: #F7FCF7;
  --green-100: #FFFFFF;

  /* Estado do Casa Ásia, ainda fora das rampas (por decidir) */
  --status-success-dark: #C8FFB4;
  --status-success-light: #0D6300;
  --status-error-dark: #FCA7A8;
  --status-error-light: #A51200;
}

/* ==========================================================================
   Tokens semânticos de cor, por tema. Escuro é o principal.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--neutral-10);
  --color-surface: var(--neutral-20);
  --color-overlay: rgba(0, 0, 0, 0.94);          /* --neutral-0 a 94% */
  --color-text: var(--neutral-100);
  --color-text-muted: var(--neutral-90);
  --color-accent: var(--yellow-70);
  --color-on-accent: var(--neutral-10);
  --color-link: var(--neutral-100);
  --color-link-hover: var(--yellow-70);
  --color-link-active-bg: var(--neutral-60);   /* clique nas ligações (chat 35): branco sobre #595959, 7:1 */
  --color-border: var(--neutral-100);
  --color-divider: color-mix(in srgb, var(--color-text) 20%, transparent);   /* filetes */
  --color-focus: var(--yellow-50);
  --color-success: var(--status-success-dark);
  --color-error: var(--status-error-dark);

  --button-primary-bg: var(--neutral-100);
  --button-primary-bg-hover: var(--neutral-90);
  --button-primary-text: var(--neutral-10);
  --button-primary-border: var(--neutral-100);
  --button-secondary-bg-hover: var(--neutral-30);
  --button-tertiary-bg: var(--neutral-20);
  --button-tertiary-bg-hover: color-mix(in srgb, var(--neutral-20) 90%, var(--neutral-100));
  --icon-button-bg: var(--neutral-30);
}

/* O aviso de cookies é sempre uma caixa clara, nos dois temas (como no site atual) */
[data-theme="light"],
.cookie-banner {
  color-scheme: light;
  --color-bg: var(--neutral-100);
  --color-surface: var(--neutral-90);
  --color-overlay: rgba(255, 255, 255, 0.94);    /* --neutral-100 a 94% */
  --color-text: var(--neutral-10);
  --color-text-muted: var(--neutral-30);
  --color-accent: var(--yellow-70);
  --color-on-accent: var(--neutral-10);
  --color-link: var(--neutral-10);
  --color-link-hover: var(--neutral-60);
  --color-link-active-bg: var(--neutral-80);   /* clique nas ligações (chat 35): preto sobre #A6A6A6; visível também no painel cinzento */
  --color-border: var(--neutral-10);
  --color-divider: color-mix(in srgb, var(--color-text) 20%, transparent);   /* filetes */
  --color-focus: var(--neutral-10);
  --color-success: var(--status-success-light);
  --color-error: var(--status-error-light);

  --button-primary-bg: var(--neutral-10);
  --button-primary-bg-hover: var(--neutral-30);
  --button-primary-text: var(--neutral-100);
  --button-primary-border: var(--neutral-10);
  --button-secondary-bg-hover: var(--neutral-90);
  --button-tertiary-bg: var(--neutral-90);
  --button-tertiary-bg-hover: color-mix(in srgb, var(--neutral-90) 90%, var(--neutral-0));
  --icon-button-bg: var(--neutral-90);
}


/* ==========================================================================
   Tokens novos do lab 2
   ========================================================================== */
[data-theme="dark"] {
  --color-text-subtle: var(--neutral-80);   /* rótulos não clicáveis (pais do menu) */
  --logo-filter: none;                      /* logótipos brancos ficam como estão */
  --focus-on-inverse: var(--neutral-10);     /* foco à volta de uma caixa escura numa página clara */
  --header-sticky-bg: rgba(2, 0, 1, 0.9);  /* --neutral-10 a 90% (cabeçalho fixo) */
}
[data-theme="light"] {
  --color-text-subtle: var(--neutral-60);
  --logo-filter: invert(1);                 /* logótipos brancos passam a pretos */
  --focus-on-inverse: var(--yellow-50);     /* foco à volta de uma caixa clara numa página escura */
  --header-sticky-bg: rgba(255, 255, 255, 0.9);   /* --neutral-100 a 90% */
}


/* Tokens partilhados da peça, das galerias e da lightbox */
:root {
  --media-control: 3rem;          /* 48px, botões dos leitores e da lightbox */
  --play-size: 6rem;              /* 96px, botão da fachada de vídeo */
  --breadcrumb-gap: var(--space-3);   /* 16: traço → texto e texto → traço, sempre igual */
  --parallax-drift: 3rem;         /* 48px, deriva máxima de uma coluna da galeria */
  --hover-zoom: 1.045;             /* aproximação das imagens no hover: subtil mas visível */
  --duration-hover: 900ms;
  --ease-hover: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gallery-columns: 2;
  --gallery-shift-1: var(--space-1);   /* deslocamento das colunas: 4n+1, 4n+2, 4n+3, 4n+4 */
  --gallery-shift-2: var(--space-0);
  --gallery-shift-3: var(--space-4);
  --gallery-shift-4: var(--space-4);
}
@media (min-width: 48em) {
  :root {
    --breadcrumb-gap: var(--space-5);  /* 36 */
    --gallery-columns: 4;
    --gallery-shift-1: var(--space-8);   /* 96 */
    --gallery-shift-2: var(--space-0);   /* 0 */
    --gallery-shift-3: var(--space-6);   /* 48 */
    --gallery-shift-4: var(--space-8);   /* 96 */
  }
}
@media (max-width: 47.99em) { :root { --play-size: 4.5rem; } }