/* Beça IA · sistema visual v1 (set/2026), aplicado ao painel em out/2026
 * Fonte da verdade: ~/Documents/AI/Eu/Design System/_fonte/ds.css. As primitivas abaixo são cópia de lá;
 * se o DS mudar uma cor, troque aqui também. Os nomes semânticos (--color-*) são os que o app.css lê.
 */

/* fontes reserva com métrica casada: a página não pula quando a Funnel chega */
@font-face { font-family: "Funnel Display Reserva"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 600 800; size-adjust: 101.93%; ascent-override: 98.11%; descent-override: 24.53%; line-gap-override: 0%; }
@font-face { font-family: "Funnel Sans Reserva"; src: local("Arial"), local("ArialMT"); font-weight: 400 700; size-adjust: 100.46%; ascent-override: 99.55%; descent-override: 24.89%; line-gap-override: 0%; }

:root {
  color-scheme: light;

  /* ---------- primitivas do DS ---------- */
  --roxo-50: #F8F5FE;  --roxo-100: #EFE9FF; --roxo-200: #E0D5FF; --roxo-300: #C9B4FF;
  --roxo-400: #AB85FE; --roxo-500: #9352FD; --roxo-600: #7C1FE8; --roxo-700: #6507BD;
  --roxo-800: #4D068C; --roxo-900: #32045A;
  --areia-50: #FDFBF7; --areia-100: #F6F2EA; --areia-200: #ECE5DB; --areia-300: #DAD1C4;
  --tinta-300: #A6A2AE; --tinta-400: #888392; --tinta-500: #6B6677; --tinta-600: #595366;
  --tinta-700: #423C50; --tinta-900: #181026;
  --uv-900: #19062E;
  --mel-200: #FEE5B3; --mel-400: #FFBD4B; --mel-700: #935A11;
  --verde-100: #DCF7E2; --verde-600: #037E3F;
  --vermelho-100: #FEE9E8; --vermelho-600: #C52B30;

  --roxo-a08: rgba(124, 31, 232, .08); --roxo-a16: rgba(124, 31, 232, .16); --roxo-a64: rgba(124, 31, 232, .64);
  --tinta-a06: rgba(24, 16, 38, .06); --tinta-a10: rgba(24, 16, 38, .10); --tinta-a22: rgba(24, 16, 38, .22);
  --areia-a18: rgba(253, 251, 247, .18); --areia-a30: rgba(253, 251, 247, .30);
  --uv-a40: rgba(15, 3, 30, .40); --uv-a55: rgba(15, 3, 30, .55); --uv-a70: rgba(15, 3, 30, .70);

  /* ---------- papéis do painel ---------- */
  /* chão claro em areia, tinta com um fio de roxo */
  --color-paper:        var(--areia-100);
  --color-paper-2:      var(--areia-200);
  --color-surface:      var(--areia-50);
  --color-rule:         var(--tinta-a10);
  --color-rule-strong:  var(--tinta-400);   /* contorno de campo: ≥ 3:1 contra a areia */
  --color-muted:        var(--tinta-500);
  --color-ink-2:        var(--tinta-700);
  --color-ink:          var(--tinta-900);

  /* roxo é a marca e a ação; mel é sinal (≤ 5% da tela) */
  --color-accent:       var(--roxo-600);
  --color-accent-hover: var(--roxo-700);
  --color-accent-press: var(--roxo-800);
  --color-accent-text:  var(--roxo-700);
  --color-accent-soft:  var(--roxo-100);
  --color-on-accent:    var(--areia-50);
  --color-signal:       var(--mel-400);
  --color-focus:        var(--roxo-600);
  --color-focus-halo:   var(--roxo-a16);

  /* estados */
  --color-success:      var(--verde-600);
  --color-success-soft: var(--verde-100);
  --color-error:        var(--vermelho-600);
  --color-error-soft:   var(--vermelho-100);
  --color-warn:         var(--mel-700);
  --color-warn-soft:    var(--mel-200);

  --shadow-whisper: 0 1px 2px var(--tinta-a06);
  --shadow-lift:    0 12px 30px -16px var(--uv-a40);
  --shadow-float:   0 28px 60px -28px var(--uv-a55);
  --shadow-action:  0 10px 24px -14px var(--uv-a70);
  --shadow-glow:    0 0 0 6px var(--roxo-a16), 0 16px 34px -14px var(--roxo-a64);

  --font-display: "Funnel Display", "Funnel Display Reserva", "Arial Black", system-ui, sans-serif;
  --font-body:    "Funnel Sans", "Funnel Sans Reserva", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* escala do app (mais densa que a do site: é ferramenta de trabalho) */
  --text-xs:   0.8125rem;
  --text-sm:   0.875rem;
  --text-card: 0.9375rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.75rem;

  /* espaço · base 4 */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;

  /* raio · os degraus do DS */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  --z-raised: 10;
  --z-sticky: 200;
  --z-toast:  500;

  --gutter:    clamp(1rem, 4vw, 2.5rem);
  --control-h: 2.75rem;
  --tabbar-h:  3.75rem;
}