/* Claude brand tokens — REAIS extraídos do claude.ai via Playwright capture
 *
 * Source of truth: recursos/assets/claude-brand/tokens.css
 * Servido por https://assets.plataforma.app/claude-brand/tokens.css
 * Origem: capturas/css/css-variables.json (445 vars Anthropic)
 *
 * Token system Anthropic é HSL space-separated (Tailwind-friendly):
 *   --anthropic-bg-100: 60 14% 97%   →   hsl(var(--anthropic-bg-100))
 */

:root {
  /* ═══════════════════════════════════════════════════════════════
     CORES OFICIAIS Anthropic (formato HSL "h s% l%")
     ═══════════════════════════════════════════════════════════════ */

  /* Backgrounds — escala 000 (white puro) → 500 (cream escuro) */
  --anthropic-bg-000: 0 0% 100%;          /* white puro */
  --anthropic-bg-100: 60 14% 97%;         /* cream principal — body bg */
  --anthropic-bg-200: 60 11% 95%;         /* surface secundária */
  --anthropic-bg-300: 45 12% 93%;         /* surface terciária — hover */
  --anthropic-bg-400: 50 11% 89%;         /* cream darker */
  --anthropic-bg-500: 50 11% 89%;

  /* Text — 000-500 do mais escuro pro mais claro */
  --anthropic-text-000: 0 0% 7%;          /* preto puro 7% (não warm) */
  --anthropic-text-100: 0 0% 7%;          /* default text */
  --anthropic-text-200: 60 3% 21%;        /* secondary text */
  --anthropic-text-300: 60 3% 21%;
  --anthropic-text-400: 43 3% 47%;        /* muted text */
  --anthropic-text-500: 43 3% 47%;

  /* Borders — todas charcoal warm 60 2% 12% (vary por opacity) */
  --anthropic-border-100: 60 2% 12%;
  --anthropic-border-200: 60 2% 12%;
  --anthropic-border-300: 60 2% 12%;
  --anthropic-border-400: 60 2% 12%;

  /* Brand peach — #D97757 (--accent-brand canonical Anthropic) */
  --anthropic-accent-brand: 14.8 63.1% 59.6%;

  /* Accent secundários */
  --anthropic-accent-100: 213 68% 50%;    /* azul */
  --anthropic-accent-200: 213 68% 50%;
  --anthropic-accent-900: 213 85% 89%;    /* azul claro */
  --anthropic-accent-pro-000: 249 48% 44%;
  --anthropic-accent-pro-100: 248 67% 63%; /* roxo Pro plan */
  --anthropic-accent-pro-200: 248 67% 63%;
  --anthropic-accent-pro-900: 247 89% 93%;

  /* Oncolor — texto SOBRE accent-brand */
  --anthropic-oncolor-100: 0 0% 100%;     /* white */
  --anthropic-oncolor-200: 60 6.7% 97.1%;
  --anthropic-oncolor-300: 60 6.7% 97.1%;

  /* Universals */
  --anthropic-always-black: 0 0% 0%;
  --anthropic-always-white: 0 0% 100%;

  /* ═══════════════════════════════════════════════════════════════
     RADIUS — Anthropic --cds-radius oficial: .25rem (4px!)
     ═══════════════════════════════════════════════════════════════ */
  --anthropic-radius: 0.25rem;

  /* ═══════════════════════════════════════════════════════════════
     SHADOWS — Anthropic --cds-shadow-* oficial
     ═══════════════════════════════════════════════════════════════ */
  --anthropic-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --anthropic-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --anthropic-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  /* ═══════════════════════════════════════════════════════════════
     TIPOGRAFIA — fontes OFICIAIS Anthropic capturadas em 2026-05-02
     Family stacks REAIS de claude.ai (--font-anthropic-*)
     ═══════════════════════════════════════════════════════════════ */

  /* Default UI font */
  --anthropic-font-sans: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Serif — usada em greeting + assistant messages (--font-claude-response) */
  --anthropic-font-serif: "Anthropic Serif", Georgia, "Arial Hebrew", "Noto Sans Hebrew", "Times New Roman", serif;

  /* Mono — code blocks */
  --anthropic-font-mono: "Anthropic Mono", ui-monospace, "Liberation Mono", monospace;

  /* User message font (--font-user-message) */
  --anthropic-font-user-message: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Claude response font (--font-claude-response) — IMPORTANTE: serif! */
  --anthropic-font-claude-response: "Anthropic Serif", Georgia, "Arial Hebrew", "Noto Sans Hebrew", "Times New Roman", serif;

  /* Accessibility — OpenDyslexic toggle (--font-dyslexia) */
  --anthropic-font-dyslexia: "OpenDyslexic", "Comic Sans MS", ui-serif, serif;

  /* Aliases legados (compat) */
  --claude-serif: var(--anthropic-font-serif);
  --claude-sans: var(--anthropic-font-sans);
  --claude-mono: var(--anthropic-font-mono);
  --claude-peach: hsl(var(--anthropic-accent-brand));
  --claude-cream: hsl(var(--anthropic-bg-100));
  --claude-charcoal: hsl(var(--anthropic-text-100));

  /* ═══════════════════════════════════════════════════════════════
     ASSETS PATHS (servidos por assets.plataforma.app)
     ═══════════════════════════════════════════════════════════════ */
  --claude-asset-base: "https://assets.plataforma.app/claude-brand";
  /* Asterisco logo: <path d="..."> em 24×24 (vide src/components/Icon.tsx CLAUDE_ASTERISK_PATH) */
  /* Wordmark: --claude-asset-base/mini-icons/anthropic-wordmark.svg (68×16) */
  /* Clawd states: --claude-asset-base/clawd/states-cropped/clawd-{state}.gif (200×200, 14 estados) */
}