/* QuackBot · tokens do site
   Fonte única de cor, tipo, espaço, raio, sombra e motion. Componente usa só token semântico
   (--bg, --text, --accent...). Primitivo (--qb-*) só aqui.
   Origem dos valores: o próprio app (resources/web/assets/index-*.css e icon.svg, v0.1.0).
   Mesmo verde, mesmo grafite, mesma Geist: o site e o produto são a mesma coisa vista de longe. */

/* Fontes: Bricolage Grotesque (display, só título), Geist (texto e UI), Geist Mono (rótulo, código, ferramenta).
   Em produção, servir woff2 local com font-display: swap; o link do Google Fonts fica só no design system. */

:root {
  /* ── Verde do pato (icon.svg: panelTop, panelBottom, upper, lower) ── */
  --qb-green-200: #C8FFAD;
  --qb-green-300: #9DFF6B;
  --qb-green-400: #6CFF33;
  --qb-green-500: #45FF00; /* --accent do app e topo da barra */
  --qb-green-600: #3EE202; /* base da barra */
  --qb-green-700: #36BC04; /* mandíbula de cima */
  --qb-green-800: #2A8708; /* mandíbula de baixo */
  --qb-green-900: #1F6B00; /* --accent-text do app no tema claro */
  --qb-green-ink: #061400; /* --accent-fg do app: texto sobre o verde */

  /* ── Grafite (escala neutra do app) ── */
  --qb-ink-1000: #0A0B0C;
  --qb-ink-950: #0E0F10; /* olho do pato, --bg */
  --qb-ink-900: #151617;
  --qb-ink-850: #1C1D1F;
  --qb-ink-800: #242628;
  --qb-ink-700: #2E3134;
  --qb-ink-600: #3A3D41;
  --qb-ink-500: #5C6168;
  --qb-ink-400: #878D95; /* bico de aço */
  --qb-ink-300: #9A9FA6;
  --qb-ink-100: #ECEDEF; /* bico prata, brilho do olho */

  /* ── Papel (tema claro do app) ── */
  --qb-paper-300: #E5E5E0;
  --qb-paper-200: #F1F1ED;
  --qb-paper-100: #F7F7F4;
  --qb-paper-0: #FFFFFF;

  /* ── Sinais do app: estado e modo. Só em estado e em chip de modo, nunca em decoração ── */
  --qb-waiting: #F5B546;   --qb-waiting-dk: #8A5A00;
  --qb-error: #FF6B6B;     --qb-error-dk: #C62828;
  --qb-ok: #3ECF6E;        --qb-ok-dk: #1E7A3E;
  --qb-plan: #B39DFF;      --qb-plan-dk: #5B3FD0;  /* modo Planejar */
  --qb-ask: #7CC7FF;       --qb-ask-dk: #0B6AA8;   /* modo Perguntar */
  --qb-iris-2: #3DF0B0;    /* íris: verde → menta → céu, só no brilho ambiente */

  /* ── Tipografia ── */
  --font-display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  --fs-display: clamp(2.75rem, 1.2rem + 5.4vw, 6.25rem); /* só o hero */
  --fs-h1: clamp(2.5rem, 1.1rem + 4vw, 4.75rem);
  --fs-h2: clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-ui: 0.9375rem;      /* body do app */
  --fs-small: 0.875rem;
  --fs-mono: 0.8125rem;
  --fs-eyebrow: 0.75rem;
  --fs-2xs: 0.6875rem;

  --lh-display: 0.9;
  --lh-tight: 0.95;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --lh-ui: 1.5;
  --lh-code: 1.7;

  --ls-display: -0.04em;
  --ls-h1: -0.035em;
  --ls-h2: -0.028em;
  --ls-h3: -0.02em;
  --ls-eyebrow: 0.16em;

  /* ── Espaço (base 4) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  --gutter: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left), env(safe-area-inset-right));
  --container: 1240px;
  --container-text: 64ch;
  --sec-y: clamp(72px, 9vw, 144px);
  --nav-h: 68px;

  /* ── Raio: o do app (sm 8, md 12, lg 20, xl 28) e a pílula ── */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ── Profundidade: fio de 1 px e duas superfícies; sombra só em janela flutuante ── */
  --shadow-1: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 12px 32px -12px rgb(0 0 0 / 0.6);
  --shadow-3: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 40px 96px -32px rgb(0 0 0 / 0.8);
  --glow: 0 8px 28px rgb(69 255 0 / 0.28);             /* --shadow-glow do app */

  /* ── Motion (valores de .claude/skills/review-animations/STANDARDS.md) ── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press: 160ms;
  --dur-hover: 180ms;
  --dur-tooltip: 150ms;
  --dur-menu-in: 200ms;
  --dur-menu-out: 150ms;
  --dur-panel: 240ms;
  --dur-nav: 300ms;
  --dur-step: 360ms;
  --dur-toast: 400ms;
  --dur-reveal: 640ms;
  --dur-hero: 900ms;
  --stagger: 60ms;
  --stagger-hero: 70ms;

  --z-nav: 50;
  --z-menu: 60;
  --z-toast: 80;
  --z-skip: 100;
}

/* ── Tema escuro (padrão, como no app) ── */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--qb-ink-950);
  --bg-sunk: var(--qb-ink-1000);
  --surface: var(--qb-ink-900);
  --surface-2: var(--qb-ink-850);
  --surface-3: var(--qb-ink-800);
  --text: var(--qb-ink-100);           /* 16.4:1 no --bg */
  --text-2: var(--qb-ink-300);         /* 7.2:1 */
  --text-3: var(--qb-ink-400);         /* 5.7:1, piso para texto */
  --line: rgb(236 237 239 / 0.09);
  --line-2: rgb(236 237 239 / 0.18);
  --accent: var(--qb-green-500);       /* 14.2:1 no --bg */
  --accent-hover: var(--qb-green-400);
  --accent-press: var(--qb-green-600);
  --accent-ink: var(--qb-green-ink);   /* 14:1 sobre o verde */
  --accent-text: var(--qb-green-500);
  --accent-soft: rgb(69 255 0 / 0.10);
  --accent-line: rgb(69 255 0 / 0.34);
  --waiting: var(--qb-waiting);
  --danger: var(--qb-error);
  --success: var(--qb-ok);
  --mode-plan: var(--qb-plan);
  --mode-ask: var(--qb-ask);
  --mode-code: var(--qb-green-500);
  --focus: var(--qb-green-400);
  --glass: rgb(14 15 16 / 0.86);
  --code-bg: var(--qb-ink-1000);

  /* Logo (variáveis do icon.svg) */
  --logo-panel-top: #45FF00;  --logo-panel-bottom: #3EE202;
  --logo-upper: #36BC04;      --logo-lower: #2A8708;
  --logo-beak-upper: #ECEDEF; --logo-beak-lower: #878D95;
  --logo-eye: #0E0F10;        --logo-glint: #ECEDEF;
}

/* ── Tema claro: o mesmo token, outro valor. Verde neon nunca vira texto: vira fundo de botão e grifo ── */
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--qb-paper-200);
  --bg-sunk: var(--qb-paper-300);
  --surface: var(--qb-paper-0);
  --surface-2: var(--qb-paper-100);
  --surface-3: var(--qb-paper-300);
  --text: #1A1C1F;                     /* 15:1 */
  --text-2: var(--qb-ink-600);         /* 9.6:1 */
  --text-3: var(--qb-ink-500);         /* 5.5:1 */
  --line: rgb(14 15 16 / 0.10);
  --line-2: rgb(14 15 16 / 0.20);
  --accent: var(--qb-green-500);
  --accent-hover: var(--qb-green-400);
  --accent-press: var(--qb-green-600);
  --accent-ink: var(--qb-green-ink);
  --accent-text: var(--qb-green-900);  /* 5.9:1 */
  --accent-soft: rgb(69 255 0 / 0.16);
  --accent-line: rgb(31 107 0 / 0.38);
  --waiting: var(--qb-waiting-dk);
  --danger: var(--qb-error-dk);
  --success: var(--qb-ok-dk);
  --mode-plan: var(--qb-plan-dk);
  --mode-ask: var(--qb-ask-dk);
  --mode-code: var(--qb-green-900);
  --focus: var(--qb-green-900);
  --glass: rgb(241 241 237 / 0.82);
  --code-bg: var(--qb-ink-950);

  /* Logo claro (o próprio icon.svg em prefers-color-scheme: light) */
  --logo-panel-top: #9A9FA6;  --logo-panel-bottom: #878D95;
  --logo-upper: #3A3D41;      --logo-lower: #2E3134;
  --logo-beak-upper: #45FF00; --logo-beak-lower: #35B705;
  --logo-eye: #ECEDEF;        --logo-glint: #0E0F10;
}

@media (prefers-contrast: more) {
  :root, [data-theme] {
    --text-2: var(--text);
    --text-3: var(--text);
    --line: rgb(128 128 128 / 0.45);
    --line-2: rgb(128 128 128 / 0.7);
  }
}