/* InkWoof interface tokens ("Sala escura, arte acesa, tinta viva").
   Direção de arte: Nova (design/ui-v2/ART-DIRECTION.md). O produto é escuro em todas as telas; não existe variante clara.
   Contrato: componentes consomem SOMENTE variáveis --iw-*; valores brutos (--iw-raw-*) nunca entram em componentes.
   Ordem da cascata: base < legacy (CSS antigo, em @layer legacy) < camada v3 sem layer. Regras sem layer sempre vencem as antigas. */
@layer base, legacy;

/* ---------- Fontes (OFL 1.1, empacotadas localmente, sem CDN) ---------- */
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 500 800; font-style: normal; font-display: swap;
}

/* Ângulo animável do aro de tinta (composer focado / agente trabalhando). */
@property --iw-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ==========================================================================
   1. PALETA BRUTA (não usar direto em componentes; usar os semânticos)
   ========================================================================== */
:root {
  /* Nanquim azulado (escuro) — matiz ~245°, croma baixo */
  --iw-raw-ink-950: #08090D;
  --iw-raw-ink-925: #0B0D12;
  --iw-raw-ink-900: #0F1118;
  --iw-raw-ink-875: #13161F;
  --iw-raw-ink-850: #191D29;
  --iw-raw-ink-800: #20263A;
  --iw-raw-ink-750: #2A3147;

  /* Grafite neutro do palco (croma ~0 para não tingir a arte) */
  --iw-raw-graphite-hi: #2B2E37;
  --iw-raw-graphite-mid: #1C1E24;
  --iw-raw-graphite-lo: #0C0D10;

  /* Papel (claro) */
  --iw-raw-paper-0: #FFFFFF;
  --iw-raw-paper-50: #F8F8FA;
  --iw-raw-paper-100: #F6F7F9;
  --iw-raw-paper-200: #EEF0F4;
  --iw-raw-paper-300: #E4E7EE;
  --iw-raw-paper-400: #D9DDE6;

  /* Tinta azul — o lápis do Inko (matiz ~229°, nunca violeta) */
  --iw-raw-cobalt-200: #C9D2FF;
  --iw-raw-cobalt-300: #A9B6FF;
  --iw-raw-cobalt-400: #8FA0FF;
  --iw-raw-cobalt-450: #6F86FF;
  --iw-raw-cobalt-500: #4562FF;
  --iw-raw-cobalt-550: #3D5CFF;
  --iw-raw-cobalt-600: #3450F0;
  --iw-raw-cobalt-650: #2E49E0;
  --iw-raw-cobalt-700: #2639B8;

  /* Teal — a mancha de tinta no focinho */
  --iw-raw-teal-300: #8AF0DE;
  --iw-raw-teal-400: #3EE0C5;
  --iw-raw-teal-500: #19C2A8;
  --iw-raw-teal-700: #0B7A69;

  /* Mel — o pelo do Inko (acento raro: Inko, Story, aviso) */
  --iw-raw-honey-300: #FFD98A;
  --iw-raw-honey-400: #F5C25E;
  --iw-raw-honey-700: #8A5E00;

  /* Céu — etapa "lendo" do agente */
  --iw-raw-sky-400: #77C3FF;
  --iw-raw-sky-700: #1F6FB8;

  /* Rosa — erro (sem laranja em lugar nenhum) */
  --iw-raw-rose-400: #FF6B86;
  --iw-raw-rose-500: #E5486A;
  --iw-raw-rose-700: #C42A4B;
}

/* ==========================================================================
   2. ESCURO (o único tema do produto)
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Superfícies: escada de luz (cada degrau = um passo mais perto) */
  --iw-void: var(--iw-raw-ink-950);        /* fundo absoluto, bordas do palco */
  --iw-bg: var(--iw-raw-ink-925);          /* trilho, cabeçalho, home */
  --iw-surface-1: var(--iw-raw-ink-900);   /* painel do agente */
  --iw-surface-2: var(--iw-raw-ink-875);   /* cartões, composer, popovers */
  --iw-surface-3: var(--iw-raw-ink-850);   /* hover, campos elevados, bolha humana */
  --iw-surface-4: var(--iw-raw-ink-800);   /* pressionado, selecionado neutro */
  --iw-surface-5: var(--iw-raw-ink-750);   /* trilho de slider, skeleton forte */

  /* Palco da arte: holofote de cima (mesa de luz) */
  --iw-stage-hi: var(--iw-raw-graphite-hi);
  --iw-stage-mid: var(--iw-raw-graphite-mid);
  --iw-stage-lo: var(--iw-raw-graphite-lo);
  --iw-stage-bg:
    radial-gradient(ellipse 74% 80% at 50% 50%, var(--iw-stage-hi) 0%, var(--iw-stage-mid) 46%, var(--iw-stage-lo) 100%);

  /* Linhas: estrutura sentida, não desenhada */
  --iw-line-1: rgba(255, 255, 255, 0.06);
  --iw-line-2: rgba(255, 255, 255, 0.10);
  --iw-line-3: rgba(255, 255, 255, 0.16);
  --iw-line-strong: rgba(255, 255, 255, 0.24);
  --iw-highlight: rgba(255, 255, 255, 0.07); /* filete interno superior */

  /* Texto */
  --iw-text-1: #F3F5FA;   /* 15.4:1 em surface-3 */
  --iw-text-2: #B9C0CF;   /*  9.2:1 em surface-3 */
  --iw-text-3: #8C95A8;   /*  5.6:1 em surface-3, 5.0:1 em surface-4 */
  --iw-text-4: #646C80;   /* decorativo / desabilitado — nunca informação */
  --iw-text-on-accent: #FFFFFF;
  --iw-text-on-bright: #0A1A17; /* sobre teal/mel claros */

  /* Ação principal (tinta) */
  --iw-accent: var(--iw-raw-cobalt-550);          /* 5.0:1 c/ branco */
  --iw-accent-top: var(--iw-raw-cobalt-500);      /* topo do gradiente do botão, 4.8:1 */
  --iw-accent-bottom: #3550F2;
  --iw-accent-hover: #5370FF;
  --iw-accent-press: var(--iw-raw-cobalt-600);
  --iw-accent-text: var(--iw-raw-cobalt-400);     /* links/ícones ativos, 7.4:1 */
  --iw-accent-soft: rgba(69, 98, 255, 0.14);
  --iw-accent-soft-2: rgba(69, 98, 255, 0.22);
  --iw-accent-line: rgba(143, 160, 255, 0.45);

  /* Seleção na arte (precisa ler sobre QUALQUER cor da peça) */
  --iw-select: #6F86FF;
  --iw-select-handle-fill: #FFFFFF;
  --iw-select-halo: rgba(10, 12, 20, 0.55);

  /* Foco por teclado */
  --iw-focus: var(--iw-raw-cobalt-400);
  --iw-focus-ring: 0 0 0 2px var(--iw-bg), 0 0 0 4px var(--iw-focus);

  /* Estados */
  --iw-success: var(--iw-raw-teal-400);
  --iw-success-soft: rgba(62, 224, 197, 0.12);
  --iw-warning: var(--iw-raw-honey-400);
  --iw-warning-soft: rgba(245, 194, 94, 0.12);
  --iw-danger: var(--iw-raw-rose-400);
  --iw-danger-fill: var(--iw-raw-rose-500);
  --iw-danger-soft: rgba(255, 107, 134, 0.12);
  --iw-info: var(--iw-raw-sky-400);

  /* Presença do agente (tinta viva) */
  --iw-agent-a: var(--iw-raw-cobalt-550);
  --iw-agent-b: var(--iw-raw-teal-400);
  --iw-agent-c: var(--iw-raw-cobalt-300);
  --iw-agent-aura:
    radial-gradient(75% 150% at 10% 0%, rgba(61, 92, 255, 0.30) 0%, transparent 68%),
    radial-gradient(60% 120% at 96% 0%, rgba(62, 224, 197, 0.14) 0%, transparent 70%);
  --iw-ink-line: linear-gradient(90deg, transparent, rgba(111, 134, 255, 0.9) 22%, rgba(62, 224, 197, 0.9) 70%, transparent);
  --iw-ink-rim: conic-gradient(from var(--iw-angle), #3D5CFF, #3EE0C5 25%, #8FA0FF 50%, #3D5CFF 75%, #3EE0C5);

  /* Etapas do agente (cor por fase) */
  --iw-step-read: var(--iw-raw-sky-400);
  --iw-step-plan: var(--iw-raw-honey-400);
  --iw-step-compose: var(--iw-raw-cobalt-400);
  --iw-step-review: var(--iw-raw-teal-400);

  /* Cores de formato (função com contenção) */
  --iw-format-carousel: var(--iw-raw-cobalt-400);
  --iw-format-post: var(--iw-raw-teal-400);
  --iw-format-story: var(--iw-raw-honey-400);
  --iw-format-custom: #C3CAD8;

  /* Vidro (só em controles flutuando sobre o palco e no composer da home) */
  --iw-glass-bg: rgba(19, 22, 31, 0.66);
  --iw-glass-bg-strong: rgba(15, 17, 24, 0.82);
  --iw-glass-blur: blur(18px) saturate(150%);
  --iw-glass-line: rgba(255, 255, 255, 0.10);

  /* Sombras: profundidade = escada + filete + sombra ambiente */
  --iw-shadow-1: inset 0 1px 0 var(--iw-highlight), 0 1px 2px rgba(0, 0, 0, 0.40);
  --iw-shadow-2: 0 0 0 1px var(--iw-line-2), inset 0 1px 0 var(--iw-highlight),
                 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 36px -10px rgba(0, 0, 0, 0.60);
  --iw-shadow-3: 0 0 0 1px var(--iw-line-2), inset 0 1px 0 var(--iw-highlight),
                 0 8px 20px rgba(0, 0, 0, 0.35), 0 40px 90px -20px rgba(0, 0, 0, 0.75);
  --iw-shadow-art: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.30),
                   0 18px 40px -12px rgba(0, 0, 0, 0.65), 0 50px 100px -30px rgba(0, 0, 0, 0.70);
  --iw-shadow-thumb: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
  --iw-glow-accent: 0 0 0 1px rgba(143, 160, 255, 0.35), 0 8px 24px -6px rgba(61, 92, 255, 0.55);
  --iw-glow-teal: 0 0 0 1px rgba(62, 224, 197, 0.35), 0 0 18px -2px rgba(62, 224, 197, 0.45);
  --iw-button-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.18);

  /* Grão de filme (gradientes não "bandam" e ganham matéria) */
  --iw-grain-opacity: 0.05;
}

/* ==========================================================================
   4. TIPOGRAFIA, ESPAÇO, FORMA, CAMADAS (independem do tema)
   ========================================================================== */
:root {
  --iw-font-ui: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --iw-font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --iw-font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", "SF Mono", monospace;

  /* Escala da interface (px/line-height) */
  --iw-fs-2xs: 11px;  --iw-lh-2xs: 14px;  /* rótulos do trilho, badges */
  --iw-fs-xs: 12px;   --iw-lh-xs: 16px;   /* metadados, dicas */
  --iw-fs-sm: 13px;   --iw-lh-sm: 18px;   /* controles densos */
  --iw-fs-md: 14px;   --iw-lh-md: 20px;   /* base da interface */
  --iw-fs-chat: 15px; --iw-lh-chat: 23px; /* conversa: leitura confortável */
  --iw-fs-lg: 17px;   --iw-lh-lg: 24px;   /* títulos de painel */
  --iw-fs-xl: 20px;   --iw-lh-xl: 26px;

  /* Display (Bricolage): só momentos de marca e títulos de tela */
  --iw-fs-d1: 76px;  --iw-lh-d1: 0.96;  --iw-ls-d1: -0.032em;   /* home 1920 */
  --iw-fs-d2: 64px;  --iw-lh-d2: 0.98;  --iw-ls-d2: -0.028em;  /* home 1440 */
  --iw-fs-d3: 44px;  --iw-lh-d3: 1.02;  --iw-ls-d3: -0.03em;   /* home 1280 / celular */
  --iw-fs-d4: 28px;  --iw-lh-d4: 1.1;   --iw-ls-d4: -0.02em;   /* estados vazios */
  --iw-fs-d5: 22px;  --iw-lh-d5: 1.15;  --iw-ls-d5: -0.015em;

  --iw-fw-regular: 400; --iw-fw-medium: 500; --iw-fw-semibold: 600; --iw-fw-bold: 700;
  --iw-fw-display: 720;
  --iw-ls-ui: -0.006em;   /* Geist ganha firmeza com tracking levemente negativo */
  --iw-ls-caps: 0.06em;   /* sobrelinhas em caixa alta */

  /* Espaço (base 4) */
  --iw-space-0: 2px;
  --iw-space-1: 4px;  --iw-space-2: 8px;  --iw-space-3: 12px; --iw-space-4: 16px;
  --iw-space-5: 20px; --iw-space-6: 24px; --iw-space-7: 32px; --iw-space-8: 40px;
  --iw-space-9: 48px; --iw-space-10: 64px; --iw-space-11: 80px; --iw-space-12: 96px;

  /* Raios */
  --iw-radius-xs: 6px;    /* keycaps, badges, chips pequenos */
  --iw-radius-sm: 8px;    /* botões de ferramenta, miniaturas */
  --iw-radius-md: 12px;   /* campos, cartões, botões grandes */
  --iw-radius-lg: 16px;   /* popovers, blocos do agente */
  --iw-radius-xl: 20px;   /* composer, folhas */
  --iw-radius-2xl: 28px;  /* composer da home, cena */
  --iw-radius-pill: 999px;
  --iw-radius-art: 3px;   /* papel da arte: quase reto, como impresso */

  /* Dimensões do shell */
  --iw-rail-w: 64px;
  --iw-header-h: 56px;
  --iw-control-h: 40px;      /* alvo mínimo */
  --iw-control-h-lg: 44px;
  --iw-control-h-sm: 32px;   /* só dentro de barras com alvo expandido por padding */
  --iw-agent-w: clamp(400px, 31.5vw, 640px); /* 1280→403 · 1440→454 · 1920→605 */
  --iw-agent-w-min: 360px;
  --iw-agent-w-max: 60vw;
  --iw-agent-w-focus: 60vw;
  --iw-agent-collapsed-w: 56px;
  --iw-chat-max: 720px;      /* medida máxima da conversa no modo foco */

  /* Camadas */
  --iw-z-stage: 0; --iw-z-float: 20; --iw-z-panel: 30; --iw-z-popover: 50;
  --iw-z-sheet: 60; --iw-z-modal: 70; --iw-z-toast: 80;

  /* ---------------- Movimento ---------------- */
  --iw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* entradas (expo-out suave) */
  --iw-ease-in: cubic-bezier(0.55, 0, 1, 0.45);        /* saídas */
  --iw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* mudanças de layout, redimensionar */
  --iw-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* pop curto: páginas, enviar, chips */
  --iw-ease-spring-soft: linear(0, 0.06 2.4%, 0.24 6.4%, 0.6 13.6%, 0.86 20%, 0.98 25.6%,
                                1.03 30.4%, 1.04 35.2%, 1.02 44%, 1 58%, 1);
  --iw-ease-linear: linear;

  --iw-dur-instant: 80ms;   /* press */
  --iw-dur-fast: 140ms;     /* hover, seleção, tooltip */
  --iw-dur-base: 200ms;     /* popover, painel de ferramenta */
  --iw-dur-panel: 260ms;    /* painel do agente abrir/recolher */
  --iw-dur-slow: 340ms;     /* modo foco, folhas no celular */
  --iw-dur-reveal: 560ms;   /* página gerada aparecendo */
  --iw-dur-hero: 900ms;     /* abertura da home (por elemento) */
  --iw-dur-breath: 2400ms;  /* respiração do orbe trabalhando */
  --iw-dur-shimmer: 1600ms; /* varredura de skeleton */
  --iw-dur-rim: 4200ms;     /* volta do aro de tinta */

  --iw-stagger-list: 40ms;
  --iw-stagger-pages: 70ms;
  --iw-stagger-hero: 90ms;

  --iw-move: 1;             /* multiplicador de deslocamento (0 em movimento reduzido) */
  --iw-loop-state: running; /* loops decorativos */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --iw-move: 0;
    --iw-loop-state: paused;
    --iw-dur-fast: 100ms; --iw-dur-base: 120ms; --iw-dur-panel: 120ms;
    --iw-dur-slow: 120ms; --iw-dur-reveal: 160ms; --iw-dur-hero: 200ms;
    --iw-stagger-list: 0ms; --iw-stagger-pages: 0ms; --iw-stagger-hero: 0ms;
    --iw-ease-spring: var(--iw-ease-out); --iw-ease-spring-soft: var(--iw-ease-out);
  }
}

/* ==========================================================================
   5. CALÇO PARA O CSS LEGADO (variáveis antigas apontam para os tokens v2)
   ========================================================================== */
:root, [data-theme] {
  --bench: var(--iw-bg); --paper: var(--iw-surface-2); --ink: var(--iw-text-1);
  --muted: var(--iw-text-3); --line: var(--iw-line-2); --accent: var(--iw-accent); --accent-soft: var(--iw-accent-soft);
  --teal: var(--iw-success); --sun: var(--iw-raw-honey-400); --positive: var(--iw-success);
  --danger: var(--iw-danger); --warning: var(--iw-warning); --font: var(--iw-font-ui);
  --inspector-width: 0px;
}

/* Tokens de seleção usados pelos mockups (a Nova referencia handle-fill como --iw-select-handle-fill). */
:root, [data-theme] { --iw-select-handle: var(--iw-select-handle-fill); }

/* ==========================================================================
   6. BASE GLOBAL (camada base: o CSS legado e os componentes vencem quando precisarem)
   ========================================================================== */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: dark; }
  body {
    margin: 0; font-family: var(--iw-font-ui); font-size: var(--iw-fs-md); line-height: var(--iw-lh-md);
    letter-spacing: var(--iw-ls-ui); color: var(--iw-text-1); background: var(--iw-void);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  }
  button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; }
  h1, h2, h3, h4, p { margin: 0; }
}
/* Sem isto, todo bloco com display próprio ignora o atributo hidden. */
[hidden] { display: none !important; }