/* ============================================================
   ATLAS AGENTS — Design Tokens

   Derivado do design system do próprio app (atlas-agents/src/index.css),
   não da identidade grega do open source. Dois temas em paridade com o app:
   dark é o default (:root, ausência de atributo) e light entra via
   data-theme='light' no <html>, aplicado pelo script anti-flash no <head>
   e mantido pelo controller (js/utils/theme.js). Nomes de token são
   estáveis entre os temas; só os valores mudam.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Superfícies, do mais profundo ao elevado ---- */
  --bg: #131313;
  --inset: #171717;
  --surface: #161616;
  --elevated: #222222;
  --selected: #242525;
  --input: #1c1c1c;
  --overlay: rgba(0, 0, 0, 0.6);

  /* ---- Bordas ---- */
  --border: #292929;
  --border-strong: #363636;

  /* ---- Texto ---- */
  --fg: #ececec;
  --fg-secondary: #b1b1b1;
  --fg-muted: #9b9b9b;
  --fg-faint: #9b9b9b;

  /* ---- Marca: Atlas Gold ---- */
  --brand: #977733;
  --brand-hover: #7a5d27;
  --brand-text: #c7a45b;
  --brand-text-hover: #ebc35a;
  /* Texto sobre o preenchimento da marca. --bg (#131313) dava só ~4.3:1 sobre
     o dourado; o preto puro chega a 5:1 e deixa --brand intacto. */
  --on-brand: #000;
  --brand-subtle: rgba(151, 119, 51, 0.14);

  /* ---- Status ---- */
  --success: #22c55e;
  --success-hover: #16a34a;
  --success-subtle: rgba(34, 197, 94, 0.14);
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-subtle: rgba(239, 68, 68, 0.14);
  --warning: #eab308;
  --warning-hover: #ca8a04;
  --warning-subtle: rgba(234, 179, 8, 0.14);
  --info: #38bdf8;
  --info-hover: #0ea5e9;
  --info-subtle: rgba(56, 189, 248, 0.14);

  /* ---- Profundidade ---- */
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-menu: 0 10px 28px rgba(0, 0, 0, 0.45);

  /* ---- Tipografia ---- */
  --font-sans: "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", Times, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: clamp(9px, 1.1vw, 11px);
  --text-xs: clamp(10px, 1.2vw, 12px);
  --text-sm: clamp(11px, 1.3vw, 13px);
  --text-md: clamp(12px, 1.4vw, 14px);
  --text-base: clamp(14px, 1.6vw, 16px);
  --text-lg: clamp(16px, 2vw, 22px);
  --text-title: clamp(28px, 4.5vw, 52px);
  --text-display: clamp(28px, 5vw, 58px);

  /* ---- Espaçamento ----
     Mesma escala e mesmos nomes do open source. As paletas são diferentes de
     propósito; o ritmo não precisa ser. */
  --space-3xs: 4px;
  --space-2xs: 6px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --section-y: clamp(36px, 5vw, 76px);
  --hero-y-top: clamp(32px, 5vw, 72px);
  --hero-y-bottom: clamp(24px, 4vw, 48px);
  --sec-head-gap: clamp(20px, 3.5vw, 40px);

  --pad-chip: var(--space-3xs) var(--space-sm);
  --pad-control: var(--space-sm) var(--space-md);
  --pad-card: clamp(14px, 2vw, 20px);
  --pad-panel: clamp(16px, 2.2vw, 26px);

  /* ---- Raio, do design system do app ---- */
  --radius-card: 0.75rem;
  --radius-input: 0.5rem;
  --radius-tag: 4px;

  /* ---- Layout ---- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);

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

:root[data-theme='light'] {
  color-scheme: light;

  /* ---- Superfícies (rampa stone), progressivamente mais claras ao elevar ---- */
  --bg: #f5f5f4;
  --inset: #fbfbfa;
  --surface: #fafaf9;
  --elevated: #ffffff;
  --selected: #f0efec;
  --input: #ffffff;
  --overlay: rgba(0, 0, 0, 0.32);

  /* ---- Bordas ---- */
  --border: #e5e4e0;
  --border-strong: #d2d0cb;

  /* ---- Texto ---- */
  --fg: #1c1917;
  --fg-secondary: #44403c;
  --fg-muted: #57534e;
  --fg-faint: #57534e;

  /* ---- Marca: Atlas Gold; o texto da marca desce a rampa (amber-600)
     porque o dourado claro não passa AA sobre superfícies claras ---- */
  --brand: #977733;
  --brand-hover: #7a5d27;
  --brand-text: #7a5d27;
  --brand-text-hover: #5e461e;
  --on-brand: #000;
  --brand-subtle: rgba(151, 119, 51, 0.14);

  /* ---- Status: matizes escurecidos para AA sobre claro ---- */
  --success: #166534;
  --success-hover: #14532d;
  --success-subtle: rgba(22, 163, 74, 0.14);
  --danger: #b91c1c;
  --danger-hover: #991b1b;
  --danger-subtle: rgba(220, 38, 38, 0.14);
  --warning: #854d0e;
  --warning-hover: #713f12;
  --warning-subtle: rgba(202, 138, 4, 0.14);
  --info: #0369a1;
  --info-hover: #075985;
  --info-subtle: rgba(2, 132, 199, 0.14);

  /* ---- Profundidade: sombras mais leves sobre fundo claro ---- */
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-menu: 0 10px 28px rgba(0, 0, 0, 0.16);
}