/*
  Design Family: ink-amber
  Produto digital para empresas com cara de demonstração ao vivo: marfim claro, cartões brancos-quentes, tinta azul-noite
  nas faixas, nos botões e no texto, âmbar e névoa (azul-acinzentado) nos gráficos. Grotesca geométrica de título (Space
  Grotesk) com espaçamento negativo, Inter no texto, Space Mono em caixa-alta espaçada nos rótulos. Um objeto 3D da marca
  — por padrão uma moeda de ouro — flutua no destaque e desce com a rolagem; nada fica parado: gráficos crescem, números
  contam e pontinhos andam pelas linhas. Escopo por atributo (R11).
  v1.61: a família nasceu (v1.60, "claret-sage") muito perto da referência — vinho, creme e sálvia, as mesmas fontes;
  virou uma variação com DNA próprio (R32): paleta, tipografia, objeto, composição e textos novos.
*/
[data-ws2-family="ink-amber"] {
  --ia-ink: #17203A;           /* texto, faixas escuras, botão principal (13,8:1 no marfim) */
  --ia-ink-deep: #0F1629;      /* sombra das cartas que empilham */
  --ia-ink-soft: #222D4C;      /* brilho e hover sobre a tinta */
  --ia-cream: #F0EDE7;         /* fundo da página (marfim) */
  --ia-ivory: #FBFAF7;         /* cartões */
  --ia-paper: #F6F3EE;         /* seções claras alternadas e moldura das telas */
  --ia-beige: #C7BFA9;         /* rótulo e destaque sobre a tinta (8,8:1) */
  --ia-gold: #D9A441;          /* âmbar: gráfico, ícone, selo, botão claro (7,2:1 na tinta) */
  --ia-gold-dark: #A57A26;     /* âmbar escuro: ponto, foco e ícone no claro — nunca texto pequeno (3,3:1) */
  --ia-gold-text: #8A6418;     /* âmbar para texto pequeno no claro (4,6:1) */
  --ia-mist: #9FB0B8;          /* névoa: segunda cor dos dados */
  --ia-mist-dark: #5D7280;
  --ia-stone: #6F7380;         /* palavra destacada em título grande (4,0:1, só ≥ 24 px) */
  --ia-stone-dark: #4E5361;    /* texto de apoio (6,6:1) */
  --ia-terracotta: #C46A4C;    /* alerta de orçamento */
  --ia-positive: #3F6B4E;      /* variação boa (5,2:1) */
  --ia-negative: #A2402F;      /* variação ruim (5,4:1) */
  --ia-line: rgba(23, 32, 58, .12);
  --ia-line-strong: rgba(23, 32, 58, .2);
  --ia-on-dark: #F0EDE7;
  --ia-on-dark-muted: rgba(240, 237, 231, .72);   /* 8,5:1 na tinta */

  /* cores dos dados: tinta, âmbar, névoa, terracota, areia, pedra */
  --ia-chart-1: #17203A; --ia-chart-2: #D9A441; --ia-chart-3: #8EA3AE; --ia-chart-4: #C46A4C; --ia-chart-5: #D9D3C4; --ia-chart-6: #6F7380;

  /* objeto 3D do destaque (data-ia-object no <body>: moeda, lingote ou placa). R26: muda com o acento.
     body = corpo, mark = monograma, rim = aro/serrilha; sheen e medal só valem para a placa */
  --ia-object-body: #D9A441;
  --ia-object-mark: #F0CF86;
  --ia-object-rim: #E8BE62;
  --ia-object-sheen: #F3D9A0;
  --ia-object-medal: #E3B556;

  --ia-font-heading: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ia-font-body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ia-font-mono: "Space Mono", Menlo, Consolas, monospace;
  --ia-heading-weight: 500;
  --ia-display-2xl: clamp(3rem, 6.6vw, 7.4rem);
  --ia-display-xl: clamp(2.5rem, 5.2vw, 5.6rem);
  --ia-display-lg: clamp(2.15rem, 4.1vw, 4.2rem);
  --ia-display-md: clamp(1.8rem, 3vw, 3.1rem);
  --ia-display-sm: clamp(1.45rem, 2.1vw, 2rem);
  --ia-label: 11px;            /* rótulo mono em caixa-alta, espaçamento .16em */

  --ia-radius: 12px;
  --ia-radius-card: 20px;      /* um pouco menos redondo que a referência (25) */
  --ia-radius-frame: 18px;
  --ia-radius-plans: 24px;
  --ia-radius-pill: 999px;
  --ws2-social-radius: 999px;
  --ws2-map-radius: 12px;
  --ia-shadow-card: 0 30px 70px -30px rgba(23, 32, 58, .45);
  --ia-shadow-widget: 0 24px 48px -28px rgba(23, 32, 58, .4);
  --ia-shadow-frame: 0 50px 100px -50px rgba(5, 10, 25, .55);
  --ia-shadow-button: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 28px -14px rgba(23, 32, 58, .7);

  --ia-container: 1400px;
  --ia-gutter: clamp(20px, 3.4vw, 48px);
  --ia-band-y: clamp(104px, 10vw, 152px);
  --ia-header-h: 72px;

  --ia-motion-profile: "amber-drift";
  --ia-ease: cubic-bezier(.16, 1, .3, 1);        /* tudo entra assim */
  --ia-ease-wipe: cubic-bezier(.76, 0, .24, 1);  /* linha de gráfico que se desenha */
}

/* Esquemas de acento (R26) ------------------------------------------------------------------------
   A identidade é a composição — marfim, faixas escuras, grotesca geométrica, rótulos em mono, o objeto 3D e os
   gráficos que se revelam. O acento troca a faixa escura, o metal e o objeto.
   Uso: <body data-ws2-family="ink-amber" data-ws2-accent="pine"> */
[data-ws2-family="ink-amber"][data-ws2-accent="pine"] {      /* pinho e cobre (com a barra de ouro combina bem) */
  --ia-ink: #1E3A31; --ia-ink-deep: #142821; --ia-ink-soft: #2B4C41; --ia-chart-1: #1E3A31;
  --ia-cream: #EFEADF; --ia-ivory: #FBF9F4; --ia-paper: #F4F0E6; --ia-beige: #CFC2A2;
  --ia-gold: #CC9563; --ia-gold-dark: #9C6A3E; --ia-gold-text: #8A5A30; --ia-chart-2: #CC9563; --ia-mist: #A7B39A; --ia-chart-3: #8FA08A;
  --ia-line: rgba(30, 58, 49, .12); --ia-line-strong: rgba(30, 58, 49, .2);
  --ia-object-body: #D4AD62; --ia-object-mark: #A8803D; --ia-object-rim: #E3C27A;
}
[data-ws2-family="ink-amber"][data-ws2-accent="graphite"] {  /* grafite e coral (com a placa de veludo combina bem) */
  --ia-ink: #252321; --ia-ink-deep: #171614; --ia-ink-soft: #35322E; --ia-chart-1: #252321;
  --ia-cream: #EEEAE3; --ia-ivory: #FAF8F4; --ia-paper: #F4F1EC; --ia-beige: #D3C6B6;
  --ia-gold: #E07A5F; --ia-gold-dark: #B8573F; --ia-gold-text: #9E4630; --ia-chart-2: #E07A5F; --ia-mist: #A5B1A0; --ia-chart-3: #A5B1A0;
  --ia-line: rgba(37, 35, 33, .12); --ia-line-strong: rgba(37, 35, 33, .2);
  --ia-object-body: #C8573F; --ia-object-sheen: #F2B8A6; --ia-object-medal: #D46A51; --ia-object-rim: #EADBC9; --ia-object-mark: #F6E6D2;
}