/* ARREMATE+ — tokens do design system (fonte única de cor, tipografia, forma e sombra).
   Cópia fiel de arremate-plus-design-system/src/styles/tokens.css — não edite aqui:
   altere no design system e copie de novo. Servido em /tokens.css para a SPA e as páginas estáticas. */
/* Geist (Vercel, SIL OFL 1.1 — fonts/Geist-OFL.txt): uma família só, variável (100–900), auto-hospedada ao lado deste
   arquivo (no site, /fonts). O URL é relativo a este CSS, então o mesmo arquivo serve ao design system e ao site. */
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2-variations"), url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand — paleta Arremaps. O degrau de cada token segue o papel dele (500 = azul principal, 950 = azul-marinho),
     então 500–800 recebem blue/600–900 da paleta; o 900 fica como estava (a paleta não tem esse tom) */
  --brand-blue-50: #eef3fe;
  --brand-blue-100: #dce6fd;
  --brand-blue-200: #b9cdfb;
  --brand-blue-300: #8aabf6;
  --brand-blue-400: #5a86ee;
  --brand-blue-500: #2457e6; /* azul (blue/600) */
  --brand-blue-600: #1b44b8; /* blue/700 */
  --brand-blue-700: #16378f; /* blue/800 */
  --brand-blue-800: #102866; /* blue/900 */
  --brand-blue-900: #101f4b;
  --brand-blue-950: #0b1e3d; /* azul-marinho (navy/900) */
  --brand-gradient: linear-gradient(135deg, #36509d 0%, #2d54cc 56%, #2459ef 100%);

  /* Commercial accent */
  --accent-50: #fffbed;
  --accent-100: #fff4c2;
  --accent-200: #ffe986;
  --accent-300: #ffdc47;
  --accent-400: #ffc21a; /* amarelo (yellow/400) */
  --accent-500: #f5b900;
  --accent-600: #d99600;
  --accent-700: #ae6b00;
  --accent-800: #8f5208;
  --accent-900: #77430d;

  /* Neutral — paleta Arremaps nos degraus que ela define (0, 50, 100, 200, 400, 600, 800); os outros ficam como estavam */
  --neutral-0: #ffffff;
  --neutral-25: #fbfcfe;
  --neutral-50: #f4f6fb;
  --neutral-100: #e9edf5;
  --neutral-200: #d6dce8;
  --neutral-300: #c5cedb;
  --neutral-400: #8a94a8;
  --neutral-500: #69778c;
  --neutral-600: #4a5670;
  --neutral-700: #344054;
  --neutral-800: #273149;
  --neutral-900: #101828;
  --neutral-950: #08111f;

  /* Semantic */
  --success-50: #e8f7f1;
  --success-500: #0b9f6a;
  --success-700: #08744e;
  --warning-50: #fff4d8;
  --warning-500: #d98b00;
  --warning-700: #995f00;
  --danger-50: #fdebec;
  --danger-500: #d63a4a;
  --danger-700: #a72533;
  --info-50: #eaf3ff;
  --info-500: #1677ff;
  --info-700: #0e55ba;

  /* Data visualization */
  --chart-1: #2d54cc;
  --chart-2: #14b8a6;
  --chart-3: #f4b400;
  --chart-4: #7c5ce7;
  --chart-5: #e05a67;
  --chart-6: #64748b;
  --chart-grid: #e5eaf1;

  /* Semantic aliases: use these in components */
  --color-canvas: var(--neutral-50);
  --color-surface: var(--neutral-0);
  --color-surface-subtle: var(--neutral-25);
  --color-surface-strong: var(--brand-blue-950);
  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-text-subtle: var(--neutral-500);
  --color-text-inverse: var(--neutral-0);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-focus: var(--brand-blue-400);
  --color-selection: var(--brand-blue-50);
  --color-action-primary: var(--accent-400);
  --color-action-primary-hover: var(--accent-500);
  --color-action-primary-text: var(--brand-blue-950);
  --color-action-secondary: var(--brand-blue-500);
  --color-action-secondary-hover: var(--brand-blue-600);
  --color-action-secondary-text: var(--neutral-0);

  /* Typography */
  /* uma família só (Geist): os dois nomes continuam para não mudar quem já usa */
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-display-size: 3rem;
  --text-display-line: 3.5rem;
  --text-h1-size: 2.25rem;
  --text-h1-line: 2.75rem;
  --text-h2-size: 1.75rem;
  --text-h2-line: 2.25rem;
  --text-h3-size: 1.375rem;
  --text-h3-line: 1.75rem;
  --text-title-size: 1.125rem;
  --text-title-line: 1.5rem;
  --text-body-size: 1rem;
  --text-body-line: 1.5rem;
  --text-body-sm-size: 0.875rem;
  --text-body-sm-line: 1.25rem;
  --text-label-size: 0.75rem;
  --text-label-line: 1rem;
  --text-caption-size: 0.6875rem;
  --text-caption-line: 1rem;

  /* Spacing: 4px base */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Shape */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgb(8 18 40 / 6%);
  --shadow-sm: 0 4px 12px rgb(8 18 40 / 8%);
  --shadow-md: 0 12px 32px rgb(8 18 40 / 12%);
  --shadow-focus: 0 0 0 3px rgb(45 84 204 / 22%);

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --layout-sidebar: 15.5rem;
  --layout-topbar: 4rem;
  --layout-mobile-nav: 4.5rem;
  --layout-content-max: 100rem;
  --layout-gutter: 2rem;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #050d1b;
  --color-surface: #0b1729;
  --color-surface-subtle: #101f34;
  --color-surface-strong: #030915;
  --color-text: #f7f9fc;
  --color-text-muted: #b9c3d0;
  --color-text-subtle: #8f9caf;
  --color-text-inverse: #081228;
  --color-border: #22324a;
  --color-border-strong: #32445f;
  --color-selection: #162d67;
  --chart-grid: #22324a;
}

@media (max-width: 63.99rem) {
  :root {
    --layout-gutter: 1.5rem;
  }
}

@media (max-width: 47.99rem) {
  :root {
    --text-display-size: 2.25rem;
    --text-display-line: 2.75rem;
    --text-h1-size: 1.75rem;
    --text-h1-line: 2.25rem;
    --text-h2-size: 1.5rem;
    --text-h2-line: 2rem;
    --layout-gutter: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}