/* ==========================================================================
   PLIMAT — Sistema de Design
   tokens.css · camada única de decisões (custom properties)

   Extraído de fase0/Plimat.dc.html (Claude Design canvas).
   Regra: nenhum outro ficheiro do sistema declara literais de cor, tamanho
   de letra, raio ou sombra. Tudo vem daqui.

   Convenção de nomes:
     --color-*    identidade e sinal
     --surface-*  fundos
     --text-*     cor de texto (e escala de texto corrido: --text-sm, ...)
     --border-*   contornos
     --decor-*    cor puramente decorativa (nunca texto essencial)
     --space-N    N = valor em px
     --radius-N   N = valor em px
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ----------------------------------------------------------------------
     TIPOS DE LETRA
     ---------------------------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

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

  /* ----------------------------------------------------------------------
     ESCALA DE TEXTO — IBM Plex Sans (interface e texto corrido)
     ---------------------------------------------------------------------- */
  --text-3xs: 11px;        /* etiquetas mínimas (badge de material) */
  --text-2xs: 11.5px;      /* sobrelinha de cartão, referência de produto */
  --text-xs: 12px;         /* sobrelinhas em maiúsculas */
  --text-xs-plus: 12.5px;  /* barra de topo, etiquetas de metadados */
  --text-sm: 13px;         /* migalhas, notas, estado */
  --text-sm-plus: 13.5px;  /* ligações secundárias, apoio de cartão */
  --text-base: 14px;       /* corpo de tabela, ligações de rodapé */
  --text-base-plus: 14.5px;/* navegação, botões, campos de formulário */
  --text-md: 15px;         /* botões grandes, blocos de contacto */
  --text-md-plus: 15.5px;  /* campo de pesquisa, título de cartão de família */
  --text-lg: 16px;         /* texto corrido */
  --text-lg-plus: 16.5px;  /* entrada («lead») de páginas internas */
  --text-xl: 18px;         /* entrada do hero */

  /* ----------------------------------------------------------------------
     ESCALA DE TÍTULOS — Archivo
     Os quatro maiores degraus são fluidos: o valor de topo do clamp() é
     exactamente o valor do canvas, atingido a partir de ~1100px de viewport.
     ---------------------------------------------------------------------- */
  --display-2xs: 19px;       /* nome de certificado, wordmark de associada */
  --display-xs: 20px;        /* título de cartão de novidade */
  --display-sm: 21px;        /* título de cartão de qualidade / projecto */
  --display-sm-plus: 22px;   /* nome de feira */
  --display-md: 24px;        /* h2 dentro de página (Medidas e referências) */
  --display-md-plus: 26px;   /* mosaico de código de família */
  --display-lg: 28px;        /* h3 do bloco dividido, h1 da área de cliente */
  --display-lg-plus: 30px;   /* h2 «A Plimat» */
  --display-xl: 32px;        /* h2 «Consulte as nossas novidades» */
  --display-xl-plus: 34px;   /* número de estatística do hero */
  --display-2xl: clamp(30px, 3.4vw, 38px);   /* h1 de ficha de produto */
  --display-2xl-plus: clamp(31px, 3.6vw, 40px); /* h1 de família, h2 catálogo */
  --display-3xl: clamp(33px, 4vw, 44px);     /* h1 de páginas internas */
  --display-4xl: clamp(36px, 4.6vw, 50px);   /* h1 Qualidade e Ambiente */
  --display-4xl-plus: clamp(37px, 4.8vw, 52px); /* h1 Empresa */
  --display-5xl: clamp(40px, 5.4vw, 60px);   /* h1 do hero */

  /* ----------------------------------------------------------------------
     ALTURA DE LINHA
     ---------------------------------------------------------------------- */
  --leading-hero: 1.03;
  --leading-display: 1.06;
  --leading-title: 1.12;
  --leading-tight: 1.28;
  --leading-snug: 1.34;
  --leading-body: 1.6;
  --leading-body-lg: 1.7;
  --leading-prose: 1.75;

  /* ----------------------------------------------------------------------
     ESPACEJAMENTO DE LETRAS
     ---------------------------------------------------------------------- */
  --tracking-hero: -0.03em;
  --tracking-display: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.06em;
  --tracking-caps-sm: 0.08em;
  --tracking-caps: 0.1em;
  --tracking-caps-md: 0.12em;
  --tracking-caps-lg: 0.14em;
  --tracking-caps-xl: 0.16em;

  /* ----------------------------------------------------------------------
     COR — MARCA
     --color-brand      identidade PLIMAT. Superfícies, bordas, ícones e
                        títulos grandes (>= 24px, ou >= 19px a bold).
     --color-brand-ink  COR DE TEXTO da marca: ligações, sobrelinhas,
                        referências, item de navegação activo. Um degrau
                        mais escura no tema claro e mais clara no escuro,
                        para cumprir WCAG AA (>= 4.5:1) em ambos.
     --color-brand-fill SUPERFÍCIE de marca que carrega
                        --color-brand-contrast (botão primário, chip
                        seleccionado, caixa de verificação).
     ---------------------------------------------------------------------- */
  --color-brand: #0090D8;
  --color-brand-ink: #0073AD;
  --color-brand-fill: #0073AD;
  --color-brand-strong: #06263B;
  --color-brand-soft: #EAF5FB;
  --color-brand-on-dark: #7FD0F5;
  --color-brand-contrast: #FFFFFF;
  --color-brand-veil: rgba(0, 144, 216, 0.16);
  --color-brand-veil-border: rgba(0, 144, 216, 0.4);

  /* COR — SINAL */
  --color-alert: #D62744;
  --color-alert-contrast: #FFFFFF;

  /* ----------------------------------------------------------------------
     COR — SUPERFÍCIES
     ---------------------------------------------------------------------- */
  --surface-page: #FFFFFF;
  --surface-raised: #FFFFFF;      /* cartões e painéis sobre a página */
  --surface-subtle: #F5F8FA;      /* secções alternadas, cabeça de tabela */
  --surface-muted: #EFF4F8;       /* moldura de imagem, mapa, miniaturas */
  --surface-hover: #F0F5F8;       /* estado hover de itens de navegação */
  --surface-inverse: #06263B;     /* barra de topo, hero, rodapé, comparador */
  --surface-inverse-deep: #0B3A57;/* moldura de imagem dentro do hero */
  --surface-header: rgba(255, 255, 255, 0.94); /* cabeçalho fixo com desfoque */
  --surface-inverse-chip: rgba(255, 255, 255, 0.09);
  --surface-inverse-toggle: rgba(255, 255, 255, 0.07);

  /* ----------------------------------------------------------------------
     COR — TEXTO
     ---------------------------------------------------------------------- */
  --text-primary: #14232E;        /* títulos e texto principal */
  --text-body: #3A4C59;           /* parágrafos longos */
  --text-muted: #5F7180;          /* metadados, migalhas, legendas */
  --text-on-inverse: #FFFFFF;
  --text-on-inverse-body: #B6CBD9;
  --text-on-inverse-muted: #8FA9BC;
  --text-on-inverse-faint: #7A93A6;
  --text-on-inverse-chip: #D3E3ED;
  --text-link: #0073AD;
  --text-link-hover: #06263B;

  /* ----------------------------------------------------------------------
     COR — DECORAÇÃO (nunca texto essencial; sempre aria-hidden)
     ---------------------------------------------------------------------- */
  --decor-display-ghost: #CBDCE7; /* código de família em corpo gigante */
  --decor-ghost: #8FA0AC;         /* wordmark de associada, legenda de mapa */
  --decor-ghost-soft: #9FB4C2;    /* etiqueta dentro de moldura vazia */

  /* ----------------------------------------------------------------------
     COR — CONTORNOS
     ---------------------------------------------------------------------- */
  --border-default: #E1E7EC;
  --border-subtle: #EEF2F5;       /* separador de linha de tabela */
  --border-strong: #B6CBD9;
  --border-interactive: #0090D8;  /* hover de cartão, foco de campo */
  --border-on-inverse: rgba(255, 255, 255, 0.12);
  --border-on-inverse-soft: rgba(255, 255, 255, 0.18);
  --border-on-inverse-strong: rgba(255, 255, 255, 0.24);

  /* ----------------------------------------------------------------------
     FOCO
     ---------------------------------------------------------------------- */
  --focus-color: #0073AD;
  --focus-color-on-inverse: #7FD0F5;
  --focus-width: 3px;
  --focus-offset: 2px;

  /* ----------------------------------------------------------------------
     ESPACEJAMENTO — o número do token é o valor em px
     ---------------------------------------------------------------------- */
  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-34: 34px;
  --space-38: 38px;
  --space-44: 44px;
  --space-56: 56px;
  --space-64: 64px;

  /* Ritmo vertical de secção (fluido; topo do clamp = valor do canvas) */
  --section-py-sm: clamp(32px, 4vw, 44px);
  --section-py-md: clamp(40px, 5vw, 56px);
  --section-py-lg: clamp(48px, 6vw, 70px);
  --section-py-xl: clamp(52px, 7vw, 80px);
  --section-py-2xl: clamp(56px, 7.5vw, 88px);
  --section-py-3xl: clamp(60px, 8vw, 96px);

  /* ----------------------------------------------------------------------
     RAIOS — o número do token é o valor em px
     ---------------------------------------------------------------------- */
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-13: 13px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* ----------------------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------------------- */
  --shadow-menu: 0 24px 44px -22px rgba(6, 38, 59, 0.28);
  --shadow-card-hover: 0 16px 30px -20px rgba(6, 38, 59, 0.4);
  --shadow-card-hover-tight: 0 16px 30px -22px rgba(6, 38, 59, 0.45);
  --shadow-float: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
  --shadow-dock: 0 -14px 34px -20px rgba(0, 0, 0, 0.6);

  /* ----------------------------------------------------------------------
     LARGURAS E MEDIDAS
     ---------------------------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 32px);
  --measure-auth: 460px;    /* cartão da área de cliente */
  --measure-hero: 530px;    /* entrada do hero */
  --measure-sm: 600px;      /* título de secção */
  --measure-md: 640px;      /* entrada de página interna */
  --measure-search: 560px;  /* campo de pesquisa do hero */
  --measure-prose: 760px;   /* h1 de página institucional */
  --sidebar-width: 236px;
  --sidebar-width-min: 180px;
  --header-min-height: 78px;
  --topbar-min-height: 38px;
  --sticky-offset: 100px;   /* topo de elementos sticky abaixo do cabeçalho */
  --header-blur: 14px;

  /* ----------------------------------------------------------------------
     MOVIMENTO E CAMADAS
     ---------------------------------------------------------------------- */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 260ms;
  --easing: cubic-bezier(0.2, 0, 0.2, 1);

  --z-dock: 50;
  --z-header: 60;
  --z-skip: 90;
}

/* ==========================================================================
   TEMA ESCURO
   Redefine EXCLUSIVAMENTE tokens já declarados no :root base.
   Aplica-se por preferência do sistema (salvo opt-out com data-theme="light")
   e por escolha explícita com data-theme="dark".
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-brand: #29A8E8;
    --color-brand-ink: #58BDF0;
    --color-brand-fill: #0073AD;
    --color-brand-strong: #061620;
    --color-brand-soft: #0E2C3E;
    --color-brand-on-dark: #7FD0F5;
    --color-brand-contrast: #FFFFFF;
    --color-brand-veil: rgba(41, 168, 232, 0.18);
    --color-brand-veil-border: rgba(41, 168, 232, 0.42);

    --color-alert: #FF8095;
    --color-alert-contrast: #14232E;

    --surface-page: #0A171F;
    --surface-raised: #10222D;
    --surface-subtle: #0E1F29;
    --surface-muted: #142835;
    --surface-hover: #17303E;
    --surface-inverse: #061620;
    --surface-inverse-deep: #0B3A57;
    --surface-header: rgba(10, 23, 31, 0.94);
    --surface-inverse-chip: rgba(255, 255, 255, 0.09);
    --surface-inverse-toggle: rgba(255, 255, 255, 0.07);

    --text-primary: #E8F0F5;
    --text-body: #C6D6E1;
    --text-muted: #9CB2C1;
    --text-on-inverse: #FFFFFF;
    --text-on-inverse-body: #B6CBD9;
    --text-on-inverse-muted: #8FA9BC;
    --text-on-inverse-faint: #8AA2B3;
    --text-on-inverse-chip: #D3E3ED;
    --text-link: #58BDF0;
    --text-link-hover: #A9DEF8;

    --decor-display-ghost: #1E3646;
    --decor-ghost: #6E8797;
    --decor-ghost-soft: #5C7484;

    --border-default: #22343F;
    --border-subtle: #1A2A34;
    --border-strong: #3A5163;
    --border-interactive: #29A8E8;

    --focus-color: #7FD0F5;
    --focus-color-on-inverse: #7FD0F5;

    --shadow-menu: 0 24px 44px -22px rgba(0, 0, 0, 0.72);
    --shadow-card-hover: 0 16px 30px -20px rgba(0, 0, 0, 0.78);
    --shadow-card-hover-tight: 0 16px 30px -22px rgba(0, 0, 0, 0.8);
    --shadow-float: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
    --shadow-dock: 0 -14px 34px -20px rgba(0, 0, 0, 0.85);
  }
}

:root[data-theme="dark"] {
  --color-brand: #29A8E8;
  --color-brand-ink: #58BDF0;
  --color-brand-fill: #0073AD;
  --color-brand-strong: #061620;
  --color-brand-soft: #0E2C3E;
  --color-brand-on-dark: #7FD0F5;
  --color-brand-contrast: #FFFFFF;
  --color-brand-veil: rgba(41, 168, 232, 0.18);
  --color-brand-veil-border: rgba(41, 168, 232, 0.42);

  --color-alert: #FF8095;
  --color-alert-contrast: #14232E;

  --surface-page: #0A171F;
  --surface-raised: #10222D;
  --surface-subtle: #0E1F29;
  --surface-muted: #142835;
  --surface-hover: #17303E;
  --surface-inverse: #061620;
  --surface-inverse-deep: #0B3A57;
  --surface-header: rgba(10, 23, 31, 0.94);
  --surface-inverse-chip: rgba(255, 255, 255, 0.09);
  --surface-inverse-toggle: rgba(255, 255, 255, 0.07);

  --text-primary: #E8F0F5;
  --text-body: #C6D6E1;
  --text-muted: #9CB2C1;
  --text-on-inverse: #FFFFFF;
  --text-on-inverse-body: #B6CBD9;
  --text-on-inverse-muted: #8FA9BC;
  --text-on-inverse-faint: #8AA2B3;
  --text-on-inverse-chip: #D3E3ED;
  --text-link: #58BDF0;
  --text-link-hover: #A9DEF8;

  --decor-display-ghost: #1E3646;
  --decor-ghost: #6E8797;
  --decor-ghost-soft: #5C7484;

  --border-default: #22343F;
  --border-subtle: #1A2A34;
  --border-strong: #3A5163;
  --border-interactive: #29A8E8;

  --focus-color: #7FD0F5;
  --focus-color-on-inverse: #7FD0F5;

  --shadow-menu: 0 24px 44px -22px rgba(0, 0, 0, 0.72);
  --shadow-card-hover: 0 16px 30px -20px rgba(0, 0, 0, 0.78);
  --shadow-card-hover-tight: 0 16px 30px -22px rgba(0, 0, 0, 0.8);
  --shadow-float: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
  --shadow-dock: 0 -14px 34px -20px rgba(0, 0, 0, 0.85);
}