/* themes.css — farpa ecosystem color themes
   Fonte: farpa-reengenharia/02-design-system/01-tokens-e-temas.md v1.0
   NÃO modificar sem versionar e documentar no laboratório.
   ─────────────────────────────────────────────────────────────── */

/* ═══ TEMA CLARO (padrão) ════════════════════════════════════════ */
.theme-claro,
body:not([class*="theme-"]) {
  color-scheme: light;

  /* Backgrounds */
  --bg-1:       #FFFFFF;
  --bg-2:       #F9FAFB;
  --bg-3:       #F3F4F6;
  --bg-4:       #E5E7EB;

  /* Texts */
  --text-1:     #111827;
  --text-2:     #374151;
  --text-3:     #6B7280;
  --text-4:     #9CA3AF;

  /* Borders */
  --border-1:   #E5E7EB;
  --border-2:   #D1D5DB;
  --border-3:   #9CA3AF;

  /* Interactives */
  --link:       #4338CA;
  --link-hover: #3730A3;
  --focus-ring: #4338CA;

  /* Surfaces */
  --surface-1:  #FFFFFF;
  --surface-2:  #F9FAFB;
  --surface-3:  #F3F4F6;

  /* Header */
  --header-bg:         #FFFFFF;
  --header-border:     #E5E7EB;
  --header-text:       #111827;

  /* Footer */
  --footer-bg:         #F9FAFB;
  --footer-text:       #6B7280;

  /* Scrollbar */
  --scrollbar-track:   #F3F4F6;
  --scrollbar-thumb:   #D1D5DB;
}

/* ═══ TEMA ESCURO ════════════════════════════════════════════════ */
.theme-escuro {
  color-scheme: dark;

  --bg-1:       #0F172A;
  --bg-2:       #1E293B;
  --bg-3:       #334155;
  --bg-4:       #475569;

  --text-1:     #F8FAFC;
  --text-2:     #E2E8F0;
  --text-3:     #94A3B8;
  --text-4:     #64748B;

  --border-1:   #334155;
  --border-2:   #475569;
  --border-3:   #64748B;

  --link:       #818CF8;
  --link-hover: #A5B4FC;
  --focus-ring: #818CF8;

  --surface-1:  #1E293B;
  --surface-2:  #0F172A;
  --surface-3:  #334155;

  --header-bg:         #1E293B;
  --header-border:     #334155;
  --header-text:       #F8FAFC;

  --footer-bg:         #0F172A;
  --footer-text:       #94A3B8;

  --scrollbar-track:   #1E293B;
  --scrollbar-thumb:   #475569;
}

/* ═══ TEMA SÉPIA ══════════════════════════════════════════════════ */
.theme-sepia {
  color-scheme: light;

  --bg-1:       #FFF8F0;
  --bg-2:       #FDF3E7;
  --bg-3:       #F5E6D3;
  --bg-4:       #EDD9C0;

  --text-1:     #3D2B1F;
  --text-2:     #5C4033;
  --text-3:     #8B6757;
  --text-4:     #A67C6B;

  --border-1:   #DDC9B4;
  --border-2:   #C9AA8C;
  --border-3:   #B08060;

  --link:       #7C3AED;
  --link-hover: #6D28D9;
  --focus-ring: #7C3AED;

  --surface-1:  #FFF8F0;
  --surface-2:  #FDF3E7;
  --surface-3:  #F5E6D3;

  --header-bg:         #FDF3E7;
  --header-border:     #DDC9B4;
  --header-text:       #3D2B1F;

  --footer-bg:         #F5E6D3;
  --footer-text:       #8B6757;

  --scrollbar-track:   #F5E6D3;
  --scrollbar-thumb:   #C9AA8C;
}

/* ═══ ALTO CONTRASTE ═════════════════════════════════════════════ */
/* REGRA: nunca remover. Rodrigo tem baixa visão. Sempre no header. */
.theme-alto-contraste {
  color-scheme: dark;

  --bg-1:       #000000;
  --bg-2:       #0A0A0A;
  --bg-3:       #111111;
  --bg-4:       #1A1A1A;

  --text-1:     #FFFFFF;
  --text-2:     #FFFF00;
  --text-3:     #FFFFFF;
  --text-4:     #FFFF00;

  --border-1:   #FFFF00;
  --border-2:   #FFFFFF;
  --border-3:   #FFFF00;

  --link:       #FFFF00;
  --link-hover: #FFFFFF;
  --focus-ring: #FFFF00;

  --surface-1:  #000000;
  --surface-2:  #0A0A0A;
  --surface-3:  #111111;

  --color-primary:       #FFFF00;
  --color-primary-hover: #FFFFFF;
  --color-accent:        #FFFF00;
  --color-accent-hover:  #FFFFFF;

  --header-bg:         #000000;
  --header-border:     #FFFF00;
  --header-text:       #FFFF00;

  --footer-bg:         #000000;
  --footer-text:       #FFFF00;

  --scrollbar-track:   #000000;
  --scrollbar-thumb:   #FFFF00;

  /* Forçar alto contraste em todos os elementos */
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
  --shadow-xl:  none;
}

/* ═══ TEMA TRADER ════════════════════════════════════════════════ */
.theme-trader {
  color-scheme: dark;

  --bg-1:       #070B10;
  --bg-2:       #0D1117;
  --bg-3:       #161B22;
  --bg-4:       #21262D;

  --text-1:     #E6EDF3;
  --text-2:     #8B949E;
  --text-3:     #484F58;
  --text-4:     #30363D;

  --border-1:   #21262D;
  --border-2:   #30363D;
  --border-3:   #484F58;

  --link:       #58A6FF;
  --link-hover: #79C0FF;
  --focus-ring: #58A6FF;

  --surface-1:  #0D1117;
  --surface-2:  #070B10;
  --surface-3:  #161B22;

  --color-accent: #39D353;

  --header-bg:         #0D1117;
  --header-border:     #21262D;
  --header-text:       #E6EDF3;

  --footer-bg:         #070B10;
  --footer-text:       #8B949E;

  --scrollbar-track:   #0D1117;
  --scrollbar-thumb:   #30363D;
}

/* ═══ BASE STYLES ════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-1);
  background-color: var(--bg-1);
  transition: color var(--transition-base), background-color var(--transition-base);
  min-height: 100vh;
}

/* Skip link — acessibilidade */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-primary);
  color: #ffffff;
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  z-index: var(--z-tooltip);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* Foco visível em tudo — NUNCA outline: none sem alternativa */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

img, video {
  max-width: 100%;
  height: auto;
}

/* Scrollbar customizado */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }