/* SHAA — tokens do sistema.
   Estrutura 1:1 com o export oficial do Refero (DESIGN.md do IKEA), agora com
   a PALETA OFICIAL DO IKEA aplicada — decisão do José em 2026-08-21.

   As cores não vieram do spec: foram extraídas do site ao vivo (ikea.com/pt/pt,
   21/08/2026) e do arquivo oficial da marca
   ikea.com/global/assets/logos/brand/ikea.svg — que declara #ffdb00 e #0058a3.
   A varredura de frequência do site rendeu as cores FUNCIONAIS que o export do
   Refero não tinha: o azul interativo dos botões, o magenta do badge, o laranja
   de promoção, o verde de disponibilidade, e o cinza real de texto (#484848,
   com 3.259 usos — não o #818181 que o spec listava).

   ⚠️ NOTA DE MARCA: eu havia trocado o amarelo+azul por Rosé/Petróleo porque
   amarelo #ffdb00 + azul sobre branco é o trade dress do IKEA, e este app vende
   móveis. O José decidiu usar a paleta original; o registro fica aqui.
   O que era Rosé Ativo #D88C7E volta a ser o amarelo; Petróleo #455C7B volta a
   ser o azul da marca. */

:root {
  /* Colors — paleta OFICIAL do IKEA, medida no site ao vivo em 21/08/2026 */
  --color-ikea-yellow: #ffdb00;       /* do ikea.svg oficial — a superfície que ativa */
  --color-ink-black: #111111;         /* texto primário (1.703 usos no site) */
  --color-pure-white: #ffffff;
  --color-warm-white: #fffefb;
  --color-text-secondary: #484848;    /* o cinza REAL de texto — o mais usado do site */
  --color-steel-gray: #484848;        /* mesmo papel do token antigo, valor corrigido */
  --color-true-black: #000000;
  --color-link-blue: #0058a3;         /* azul da MARCA, do ikea.svg — link e logo */
  --color-interactive-blue: #007cc1;  /* azul de AÇÃO — botão circular de carrinho */
  --color-badge-pink: #e00751;        /* o magenta do selo "Mais vendido" */
  --color-promo-orange: #ca5008;      /* preço promocional */
  --color-stock-green: #37b886;       /* disponibilidade */
  --color-divider: #dfdfdf;           /* borda e divisor (524 usos) */
  --color-surface-gray: #f5f5f5;      /* superfície cinza dos tiles de categoria */

  /* Typography — Font Families */
  --font-shaa: "Inter", "DM Sans", ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale (oficial) */
  --text-caption: 13px;      --leading-caption: 1.4;
  --text-small: 14px;
  --text-body: 16px;         --leading-body: 1.57;
  --text-subheading: 20px;   --leading-subheading: 1.2;  --tracking-subheading: -0.54px;
  --text-heading: 36px;      --leading-heading: 1.08;    --tracking-heading: -0.97px;
  --text-display: 51px;      --leading-display: 1;       --tracking-display: -1.48px;

  /* Typography — Weights (binário, sem exceção fora do hero editorial) */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Spacing (oficial, base 8) */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 80px;
  --card-padding: 20px;
  --element-gap: 24px;

  /* Border Radius — CORRIGIDO em 21/08 (decisão do José: "não arredonde mais
     as pontas dos widgets"). O export do Refero dizia 8px em tudo; o ikea.com
     AO VIVO usa cards, imagens, painéis e badges RETOS (0) e só arredonda o
     que é controle: botão primário em pílula, ícones circulares, busca em
     pílula. Medir venceu ler, de novo. */
  --radius-lg: 0;
  --radius-cards: 0;
  --radius-images: 0;
  --radius-inputs: 0;
  --radius-buttons: 999px;     /* "Adicionar ao cesto" é pílula cheia */
  --radius-default: 0;

  /* Surfaces — os 4 níveis oficiais; o nível 3 é o que ativa */
  --surface-page-canvas: #ffffff;
  --surface-card-surface: #ffffff;
  --surface-warm-white-surface: #fffefb;
  --surface-gray: #f5f5f5;
  --surface-accent-surface: #ffdb00;

  /* Véu obrigatório sob texto em foto (30–60% conforme o spec) */
  --veu-foto: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);

  /* ── Aliases legados (--cor-*) — as 3 páginas já construídas usam estes.
        Apontam para os oficiais; componente novo deve usar os nomes oficiais. */
  --cor-rose-ativo: var(--color-ikea-yellow);   /* o papel de ativar — agora amarelo */
  --cor-ink: var(--color-ink-black);
  --cor-branco: var(--color-pure-white);
  --cor-branco-quente: var(--color-warm-white);
  --cor-cinza: var(--color-steel-gray);
  --cor-preto: var(--color-true-black);
  --cor-petroleo: var(--color-link-blue);        /* o papel de link — agora azul da marca */
  --cor-aco: var(--color-surface-gray);         /* selo/decorativo: o cinza dos tiles */
  --cor-acao: var(--color-interactive-blue);    /* botão circular de carrinho */
  --cor-badge: var(--color-badge-pink);         /* selo "Mais escolhido" */
  --cor-promo: var(--color-promo-orange);
  --cor-estoque: var(--color-stock-green);
  --cor-divisor: var(--color-divider);
  --fonte: var(--font-shaa);
  --peso-corpo: var(--font-weight-regular);
  --peso-titulo: var(--font-weight-bold);
  --tam-display: var(--text-display);  --lh-display: var(--leading-display);  --ls-display: -0.029em;
  --tam-heading: var(--text-heading);  --lh-heading: var(--leading-heading);  --ls-heading: -0.027em;
  --tam-sub: var(--text-subheading);   --lh-sub: 1.62;
  --tam-subheading: var(--text-subheading);   /* alias usado pelas páginas novas (revisor 21/08) */
  --tam-corpo: var(--text-body);       --lh-corpo: var(--leading-body);
  --tam-small: var(--text-small);
  --tam-caption: var(--text-caption);  --lh-caption: var(--leading-caption);
  --base: var(--spacing-unit);
  --largura-max: var(--page-max-width);
  --vao-secao: var(--section-gap);
  --pad-card: var(--card-padding);
  --vao: var(--element-gap);
  --raio: var(--radius-default);
}

@theme {
  --color-ikea-yellow: #ffdb00;
  --color-ink-black: #111111;
  --color-pure-white: #ffffff;
  --color-warm-white: #fffefb;
  --color-text-secondary: #484848;
  --color-true-black: #000000;
  --color-link-blue: #0058a3;
  --color-interactive-blue: #007cc1;
  --color-badge-pink: #e00751;
  --color-promo-orange: #ca5008;
  --color-stock-green: #37b886;
  --color-divider: #dfdfdf;
  --color-surface-gray: #f5f5f5;
  --font-shaa: "Inter", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --text-caption: 13px;
  --leading-caption: 1.4;
  --text-body: 16px;
  --leading-body: 1.57;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.54px;
  --text-heading: 36px;
  --leading-heading: 1.08;
  --tracking-heading: -0.97px;
  --text-display: 51px;
  --leading-display: 1;
  --tracking-display: -1.48px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-80: 80px;
  --spacing-120: 120px;
  --radius-lg: 0;
}