/* ═══════════════════════════════════════════════════════════════════════════
   AxiAPIS UI v5 "ATLAS" — tokens.css
   Design tokens: neutros frios em camadas, 1 acento cobalto usado com
   parcimônia, semânticas para método/status HTTP, tipografia 12–40.
   Define TAMÉM os nomes de variáveis legadas (--bg-*, --text-*, --border-*,
   --c-*, --accent*...) mapeados para os novos valores, para que todo markup
   herdado (docs/admin/verify) herde o novo idioma visual.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Tipografia ────────────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-head: var(--font-display);
  --font-sans: var(--font-body);

  /* escala tipográfica */
  --fs-2xs: 0.6875rem;   /* 11 */
  --fs-xs: 0.75rem;      /* 12 */
  --fs-sm: 0.8125rem;    /* 13 */
  --fs-md: 0.875rem;     /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-lg: 1.25rem;      /* 20 */
  --fs-xl: 1.75rem;      /* 28 */
  --fs-2xl: 2.5rem;      /* 40 */
  --fs-hero: clamp(2.375rem, 4.6vw + 1rem, 3.5rem);

  /* ── Espaçamento (base 4/8) ────────────────────────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;   --sp-24: 6rem;

  /* ── Raios ─────────────────────────────────────────────────────────────── */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px;
  --r-full: 999px;

  /* ── Movimento ─────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 150ms;
  --dur-slow: 280ms;

  /* ══ TEMA CLARO ════════════════════════════════════════════════════════ */
  --bg-0: #f7f7f8;            /* página */
  --bg-1: #ffffff;            /* superfície */
  --bg-2: #ffffff;            /* card */
  --bg-3: #f4f4f5;            /* inset/sunken */
  --bg-4: #ececee;            /* hover inset */
  --bg-elevated: #ffffff;

  --text-0: #101014;          /* títulos / primário */
  --text-1: #3c3c43;          /* corpo */
  --text-2: #6e6e76;          /* secundário */
  --text-3: #9b9ba3;          /* terciário/placeholders */
  --text-primary: var(--text-0);
  --text-secondary: var(--text-2);
  --text-tertiary: var(--text-3);
  --text-muted: var(--text-3);

  --border-0: #e6e6e9;        /* hairline */
  --border-1: #e6e6e9;
  --border-2: #d9d9de;
  --border-3: #cbcbd2;

  /* acento cobalto — cirúrgico: links, foco, ativo, gráficos */
  --accent: #0b5fd4;
  --accent-strong: #094fb2;
  --accent-2: #0a55be;
  --accent-dim: rgba(11, 95, 212, 0.09);
  --accent-dim2: rgba(11, 95, 212, 0.16);
  --accent-soft: #eaf1fd;
  --accent-grad: none;
  --accent-glow: transparent;
  --on-accent: #ffffff;

  /* semânticas */
  --success: #067647;
  --success-light: rgba(6, 118, 71, 0.1);
  --warning: #b45309;
  --warning-light: rgba(180, 83, 9, 0.1);
  --danger: #d92d20;
  --danger-light: rgba(217, 45, 32, 0.09);
  --info: var(--accent);
  --info-light: var(--accent-dim);

  /* paleta auxiliar (métodos, categorias, gráficos) */
  --c-indigo: #444ce7;
  --c-violet: #6938ef;
  --c-purple: #7a5af8;
  --c-emerald: #087443;
  --c-amber: #b54708;
  --c-rose: #e11d48;
  --c-sky: #0086c9;
  --c-orange: #b93815;
  --c-lime: #3f6212;
  --c-pink: #c11574;

  /* cards */
  --card-bg: var(--bg-1);
  --card-border: var(--border-0);
  --card-shadow: 0 1px 2px rgba(16, 17, 20, 0.04);
  --card-shadow-hover: 0 6px 20px -6px rgba(16, 17, 20, 0.1), 0 1px 2px rgba(16, 17, 20, 0.05);

  /* sombras (2 níveis + overlay) */
  --shadow-sm: 0 1px 2px rgba(16, 17, 20, 0.05);
  --shadow-md: 0 3px 10px -2px rgba(16, 17, 20, 0.08), 0 1px 2px rgba(16, 17, 20, 0.04);
  --shadow-lg: 0 16px 40px -12px rgba(16, 17, 20, 0.18), 0 2px 6px rgba(16, 17, 20, 0.05);
  --shadow-glow: none;
  --shadow-ring: inset 0 0 0 1px var(--border-0);

  /* legado de animação (inertes) */
  --border-angle: 0deg;
  --path-len: 0;
  --orbit-r: 0;

  /* superfícies utilitárias */
  --code-bg: #0c0d12;         /* blocos de código SEMPRE escuros */
  --code-border: #1d1f29;
  --code-text: #e4e7f1;
  --kbd-bg: var(--bg-3);
  --overlay: rgba(20, 21, 26, 0.44);
  --header-bg: rgba(255, 255, 255, 0.82);
  --sidebar-bg: var(--bg-0);
  --scrollbar-thumb: #d4d4d9;
  --scrollbar-track: transparent;
  --focus-ring: 0 0 0 2px var(--bg-1), 0 0 0 4px rgba(11, 95, 212, 0.55);
  --selection-bg: rgba(11, 95, 212, 0.16);

  /* gráficos */
  --chart-grid: #eceded;
  --chart-point: var(--accent);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg-0: #0a0a0d;
  --bg-1: #101014;
  --bg-2: #131318;
  --bg-3: #1a1a21;
  --bg-4: #22222b;
  --bg-elevated: #17171d;

  --text-0: #f2f2f4;
  --text-1: #c6c6cd;
  --text-2: #8e8e99;
  --text-3: #62626d;
  --text-primary: var(--text-0);
  --text-secondary: var(--text-2);
  --text-tertiary: var(--text-3);
  --text-muted: var(--text-3);

  --border-0: #232330;
  --border-1: #232330;
  --border-2: #2c2c3a;
  --border-3: #383846;

  --accent: #7cabff;
  --accent-strong: #9dbfff;
  --accent-2: #a7c4ff;
  --accent-dim: rgba(124, 171, 255, 0.1);
  --accent-dim2: rgba(124, 171, 255, 0.17);
  --accent-soft: rgba(124, 171, 255, 0.12);
  --on-accent: #0a1120;

  --success: #4ade80;
  --success-light: rgba(74, 222, 128, 0.11);
  --warning: #fbbf24;
  --warning-light: rgba(251, 191, 36, 0.1);
  --danger: #f87171;
  --danger-light: rgba(248, 113, 113, 0.1);
  --info: var(--accent);
  --info-light: var(--accent-dim);

  --c-indigo: #818cf8;
  --c-violet: #a78bfa;
  --c-purple: #b39df8;
  --c-emerald: #34d399;
  --c-amber: #fbbf24;
  --c-rose: #fb7185;
  --c-sky: #38bdf8;
  --c-orange: #fb923c;
  --c-lime: #a3e635;
  --c-pink: #f472b6;

  --card-bg: var(--bg-2);
  --card-border: var(--border-0);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
  --card-shadow-hover: 0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 48px -16px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-ring: inset 0 0 0 1px var(--border-0);

  --code-bg: #0b0c11;
  --code-border: #1e2029;
  --code-text: #e6e9f2;
  --kbd-bg: var(--bg-3);
  --overlay: rgba(4, 4, 8, 0.62);
  --header-bg: rgba(10, 10, 13, 0.78);
  --sidebar-bg: #0c0c10;
  --scrollbar-thumb: #2c2c38;
  --scrollbar-track: transparent;
  --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px rgba(124, 171, 255, 0.6);
  --selection-bg: rgba(124, 171, 255, 0.22);

  --chart-grid: #1d1d26;
  --chart-point: var(--accent);
}