/* ==========================================================================
   WE2 Marketing · Tokens v1.0
   Base: Estratégia de Marca WE2 (paleta terrosa, Inter + PP Editorial New,
   gradiente granulado) + material Liquid Glass para a plataforma de IA.
   ========================================================================== */

@font-face { font-family: "PP Editorial New"; src: url("fonts/PPEditorialNew-Ultralight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Editorial New"; src: url("fonts/PPEditorialNew-UltralightItalic.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Editorial New"; src: url("fonts/PPEditorialNew-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Editorial New"; src: url("fonts/PPEditorialNew-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* ---- Paleta da marca (valores oficiais) ---- */
  --we2-cream: #FFFCF5;     /* Fundo claro */
  --we2-mist: #ECEDE8;      /* Neutro */
  --we2-gold: #BA9A78;      /* Dominante */
  --we2-sand: #CEB8A1;      /* Suporte */
  --we2-cocoa: #593F39;     /* Suporte escuro */
  --we2-espresso: #322320;  /* Destaque escuro */
  --we2-ink: #191110;       /* Texto / CTA */
  --we2-slate: #3E4A66;     /* Filete azul do logotipo */

  /* ---- Fundo e superfícies ---- */
  --bg: #FFFCF5;
  --bg-sunken: #F5F0E6;
  --surface: #FFFFFF;
  --surface-2: #FAF6EE;
  --surface-3: #F1EADD;
  --surface-inverse: #191110;
  --overlay: rgba(25, 17, 16, .42);

  /* ---- Texto ---- */
  --text: #191110;
  --text-2: #593F39;
  --text-3: #7A665C;
  --text-disabled: #B3A596;
  --text-inverse: #FFFCF5;
  --text-accent: #8A6A48;

  /* ---- Bordas ---- */
  --border: #E8E0D2;
  --border-strong: #CEB8A1;
  --border-inverse: rgba(255, 252, 245, .16);
  --focus: #8A6A48;

  /* ---- Ações ---- */
  --action: #191110;
  --action-hover: #322320;
  --action-fg: #FFFCF5;
  --accent: #BA9A78;
  --accent-hover: #A8875F;
  --accent-soft: #F3EADD;
  --accent-fg: #191110;

  /* ---- Feedback ---- */
  --success: #4B6E4C; --success-soft: #E7EFE3;
  --warning: #9A6618; --warning-soft: #F8EDD9;
  --danger: #A23E2C;  --danger-soft: #F7E3DC; --danger-hover: #8A3222;
  --info: #3E4A66;    --info-soft: #E4E7EF;

  /* ---- Mensagem do usuário ---- */
  --bubble: #593F39; --bubble-fg: #FFFCF5;

  /* ---- Fundo ambiente (dá ao vidro algo para refratar) ---- */
  --ambient-1: rgba(206, 184, 161, .55);
  --ambient-2: rgba(236, 237, 232, .9);
  --ambient-3: rgba(186, 154, 120, .30);

  /* ---- Gradiente granulado (assinatura da marca) ---- */
  --grad-signature:
    radial-gradient(60% 80% at 15% 20%, #E6DCCD 0%, transparent 60%),
    radial-gradient(50% 70% at 85% 30%, #CEB8A1 0%, transparent 60%),
    radial-gradient(70% 90% at 60% 100%, #6E5048 0%, transparent 65%),
    linear-gradient(160deg, #F2E4D2 0%, #CEB8A1 55%, #7E5A4A 100%);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* ---- Liquid Glass ---- */
  --glass-bg: rgba(255, 252, 245, .52);
  --glass-bg-strong: rgba(255, 252, 245, .74);
  --glass-tint: rgba(236, 237, 232, .16);
  --glass-border: rgba(255, 255, 255, .62);
  --glass-edge: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.15) 40%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.55));
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.18);
  --glass-shadow: 0 1px 1px rgba(50,35,32,.04), 0 12px 40px -12px rgba(50,35,32,.28);
  --glass-blur: 22px;
  --glass-saturate: 170%;

  /* ---- Tipografia ---- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-editorial: "PP Editorial New", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-signature: var(--font-editorial); /* assinatura: PP Editorial New itálico */

  --fs-display: clamp(2.6rem, 5.4vw, 4.25rem); --lh-display: 1.02;
  --fs-h1: clamp(1.9rem, 3.2vw, 2.5rem);       --lh-h1: 1.1;
  --fs-h2: 1.625rem;  --lh-h2: 1.2;
  --fs-h3: 1.1875rem; --lh-h3: 1.3;
  --fs-body: .9375rem; --lh-body: 1.6;
  --fs-sm: .8125rem;  --lh-sm: 1.5;
  --fs-caption: .75rem; --lh-caption: 1.4;
  --fs-label: .6875rem; --ls-label: .09em;
  --fs-code: .8125rem;

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

  /* ---- Raios ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- Sombras (tingidas de marrom, nunca cinza puro) ---- */
  --shadow-1: 0 1px 2px rgba(50,35,32,.06), 0 1px 1px rgba(50,35,32,.04);
  --shadow-2: 0 2px 4px rgba(50,35,32,.04), 0 10px 24px -10px rgba(50,35,32,.20);
  --shadow-3: 0 4px 8px rgba(50,35,32,.05), 0 28px 64px -20px rgba(50,35,32,.36);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(.23, 1, .32, 1);        /* entradas e respostas */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);    /* movimentos na tela */
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);  /* toques com rebote leve */
  --ease-soft: cubic-bezier(.16, 1, .3, 1);       /* menus e revelações suaves */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms; --dur-4: 420ms;

  color-scheme: light;
}

/* ---- Tema escuro: sistema ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #130E0D; --bg-sunken: #0D0A09; --surface: #1C1614; --surface-2: #241C19; --surface-3: #2E2420;
    --surface-inverse: #FFFCF5; --overlay: rgba(6, 4, 4, .62);
    --text: #FFFCF5; --text-2: #DCCDBC; --text-3: #A89585; --text-disabled: #5E5048; --text-inverse: #191110; --text-accent: #D6B690;
    --border: #342925; --border-strong: #5A4840; --border-inverse: rgba(25,17,16,.16); --focus: #D6B690;
    --action: #FFFCF5; --action-hover: #EDE3D3; --action-fg: #191110;
    --accent: #CEB8A1; --accent-hover: #DCC8B2; --accent-soft: #2C221E; --accent-fg: #191110;
    --success: #93BB8E; --success-soft: #1D2A1D; --warning: #E3B566; --warning-soft: #2E2414;
    --danger: #EC8E7B; --danger-soft: #361A17; --danger-hover: #F2A594; --info: #A3B0D2; --info-soft: #1D2232;
    --grad-signature:
      radial-gradient(60% 80% at 15% 20%, #4A3630 0%, transparent 60%),
      radial-gradient(50% 70% at 85% 30%, #6E5048 0%, transparent 60%),
      radial-gradient(70% 90% at 60% 100%, #2C1C17 0%, transparent 65%),
      linear-gradient(160deg, #3A2A24 0%, #241915 55%, #120C0B 100%);
    --bubble: #6E5048; --bubble-fg: #FFFCF5;
    --ambient-1: rgba(110, 80, 72, .40); --ambient-2: rgba(50, 35, 32, .7); --ambient-3: rgba(186, 154, 120, .14);
    --glass-bg: rgba(38, 28, 25, .48); --glass-bg-strong: rgba(34, 25, 22, .76); --glass-tint: rgba(206,184,161,.06);
    --glass-border: rgba(255,255,255,.12);
    --glass-edge: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.04) 40%, rgba(255,255,255,.02) 60%, rgba(255,255,255,.18));
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04);
    --glass-shadow: 0 1px 1px rgba(0,0,0,.2), 0 16px 48px -12px rgba(0,0,0,.6);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 12px 28px -10px rgba(0,0,0,.6);
    --shadow-3: 0 4px 8px rgba(0,0,0,.3), 0 30px 70px -20px rgba(0,0,0,.75);
    color-scheme: dark;
  }
}
/* ---- Tema escuro: escolha explícita ---- */
:root[data-theme="dark"] {
  --bg: #130E0D; --bg-sunken: #0D0A09; --surface: #1C1614; --surface-2: #241C19; --surface-3: #2E2420;
  --surface-inverse: #FFFCF5; --overlay: rgba(6, 4, 4, .62);
  --text: #FFFCF5; --text-2: #DCCDBC; --text-3: #A89585; --text-disabled: #5E5048; --text-inverse: #191110; --text-accent: #D6B690;
  --border: #342925; --border-strong: #5A4840; --border-inverse: rgba(25,17,16,.16); --focus: #D6B690;
  --action: #FFFCF5; --action-hover: #EDE3D3; --action-fg: #191110;
  --accent: #CEB8A1; --accent-hover: #DCC8B2; --accent-soft: #2C221E; --accent-fg: #191110;
  --success: #93BB8E; --success-soft: #1D2A1D; --warning: #E3B566; --warning-soft: #2E2414;
  --danger: #EC8E7B; --danger-soft: #361A17; --danger-hover: #F2A594; --info: #A3B0D2; --info-soft: #1D2232;
  --grad-signature:
    radial-gradient(60% 80% at 15% 20%, #4A3630 0%, transparent 60%),
    radial-gradient(50% 70% at 85% 30%, #6E5048 0%, transparent 60%),
    radial-gradient(70% 90% at 60% 100%, #2C1C17 0%, transparent 65%),
    linear-gradient(160deg, #3A2A24 0%, #241915 55%, #120C0B 100%);
  --bubble: #6E5048; --bubble-fg: #FFFCF5;
  --ambient-1: rgba(110, 80, 72, .40); --ambient-2: rgba(50, 35, 32, .7); --ambient-3: rgba(186, 154, 120, .14);
  --glass-bg: rgba(38, 28, 25, .48); --glass-bg-strong: rgba(34, 25, 22, .76); --glass-tint: rgba(206,184,161,.06);
  --glass-border: rgba(255,255,255,.12);
  --glass-edge: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.04) 40%, rgba(255,255,255,.02) 60%, rgba(255,255,255,.18));
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04);
  --glass-shadow: 0 1px 1px rgba(0,0,0,.2), 0 16px 48px -12px rgba(0,0,0,.6);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 12px 28px -10px rgba(0,0,0,.6);
  --shadow-3: 0 4px 8px rgba(0,0,0,.3), 0 30px 70px -20px rgba(0,0,0,.75);
  color-scheme: dark;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
:focus-visible { outline: none; box-shadow: var(--ring); }
html { scrollbar-color: var(--border-strong) transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
input, textarea { caret-color: var(--text-accent); accent-color: var(--we2-cocoa); }
a { text-underline-offset: .2em; text-decoration-thickness: 1px; }
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}