/* ============================================================
   DESIGN TOKENS — Fonte canônica de variáveis
   Conexão Jaú — Sistema SaaS Educacional
   UTF-8 sem BOM — não modificar encoding
   ============================================================ */

:root {
  /* ── Paleta Base — Primary (Blue) ── */
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  /* ── Paleta Base — Success (Green) ── */
  --color-success-50:  #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;

  /* ── Paleta Base — Danger (Red) ── */
  --color-danger-50:   #fef2f2;
  --color-danger-100:  #fee2e2;
  --color-danger-200:  #fecaca;
  --color-danger-500:  #ef4444;
  --color-danger-600:  #dc2626;
  --color-danger-700:  #b91c1c;

  /* ── Paleta Base — Warning (Amber) ── */
  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;

  /* ── Paleta Base — Info (Blue alias) ── */
  --color-info-50:     #eff6ff;
  --color-info-100:    #dbeafe;
  --color-info-500:    #3b82f6;
  --color-info-600:    #2563eb;
  --color-info-700:    #1d4ed8;

  /* ── Paleta Base — Gray (Slate) ── */
  --color-gray-50:   #f8fafc;
  --color-gray-100:  #f1f5f9;
  --color-gray-200:  #e2e8f0;
  --color-gray-300:  #cbd5e1;
  --color-gray-400:  #94a3b8;
  --color-gray-500:  #64748b;
  --color-gray-600:  #475569;
  --color-gray-700:  #334155;
  --color-gray-800:  #1e293b;
  --color-gray-900:  #0f172a;
  --color-gray-950:  #020617;

  /* ── Tokens Semânticos — Backgrounds (Light Mode) ── */
  --bg-app:           #f1f5f9;
  --bg-card:          #ffffff;
  --bg-card-hover:    #f8fafc;
  --bg-sidebar:       #1e293b;
  --bg-sidebar-hover: #334155;
  --bg-header:        #ffffff;
  --bg-input:         #ffffff;
  --bg-muted:         #f8fafc;
  --bg-subtle:        #f1f5f9;
  --bg-secondary:     #f1f5f9;
  --bg-hover:         #f1f5f9;
  --bg-overlay:       rgb(0 0 0 / 0.5);

  /* ── Tokens Semânticos — Texto (Light Mode) ── */
  --text-primary:        #0f172a;
  --text-secondary:      #334155;
  --text-muted:          #64748b;
  --text-label:          #475569;
  --text-disabled:       #94a3b8;
  --text-inverse:        #ffffff;
  --text-sidebar:        #94a3b8;
  --text-sidebar-active: #ffffff;

  /* ── Tokens Semânticos — Bordas (Light Mode) ── */
  --border-default:  #e2e8f0;
  --border-input:    #cbd5e1;
  --border-focus:    #3b82f6;
  --border-sidebar:  #334155;

  /* ── Tokens Semânticos — Sombras ── */
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ── Tipografia ── */
  --font-family:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono:   ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  --font-size-xs:       0.75rem;    /* 12px */
  --font-size-sm:       0.875rem;   /* 14px */
  --font-size-base:     1rem;       /* 16px */
  --font-size-lg:       1.125rem;   /* 18px */
  --font-size-xl:       1.25rem;    /* 20px */
  --font-size-2xl:      1.5rem;     /* 24px */
  --font-size-3xl:      1.875rem;   /* 30px */
  --font-size-4xl:      2.25rem;    /* 36px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;
  --line-height-tight:  1.25;
  --line-height-snug:   1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* ── Espaçamento ── */
  --spacing-0:  0;
  --spacing-1:  0.25rem;   /* 4px */
  --spacing-2:  0.5rem;    /* 8px */
  --spacing-3:  0.75rem;   /* 12px */
  --spacing-4:  1rem;      /* 16px */
  --spacing-5:  1.25rem;   /* 20px */
  --spacing-6:  1.5rem;    /* 24px */
  --spacing-8:  2rem;      /* 32px */
  --spacing-10: 2.5rem;    /* 40px */
  --spacing-12: 3rem;      /* 48px */
  --spacing-16: 4rem;      /* 64px */
  --spacing-20: 5rem;      /* 80px */
  --spacing-24: 6rem;      /* 96px */

  /* ── Border Radius ── */
  --radius-sm:   0.25rem;    /* 4px */
  --radius-md:   0.375rem;   /* 6px */
  --radius-lg:   0.5rem;     /* 8px */
  --radius-xl:   0.75rem;    /* 12px */
  --radius-2xl:  1rem;       /* 16px */
  --radius-3xl:  1.5rem;     /* 24px */
  --radius-full: 9999px;

  /* ── Transições ── */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;
  --transition-slower: 500ms ease;

  /* ── Layout — Sidebar / Header ── */
  --sidebar-width:           260px;
  --sidebar-collapsed-width: 64px;
  --header-height:           64px;

  /* ── Z-index stack ── */
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-overlay:   1040;
  --z-modal:     1050;
  --z-popover:   1060;
  --z-toast:     1070;
  --z-tooltip:   1080;
  --z-top:       9999;

  /* ── Containers de gráfico ── */
  --chart-height-sm:  200px;
  --chart-height-md:  280px;
  --chart-height-lg:  360px;

  /* ── Tokens Sidebar — Light Mode ── */
  --sidebar-bg:              #1e293b;
  --sidebar-text:            #94a3b8;
  --sidebar-text-active:     #ffffff;
  --sidebar-link-active-bg:  #334155;
  --sidebar-border:          #334155;

  /* ── Gamificação — Medalhas e Níveis ── */
  --color-gamif-bronze-bg:   #cd7f32;
  --color-gamif-bronze-text: #ffffff;
  --color-gamif-silver-bg:   #c0c0c0;
  --color-gamif-silver-text: #1e293b;
  --color-gamif-gold-bg:     #ffd700;
  --color-gamif-gold-text:   #1e293b;
  --color-gamif-diamond-from: #a8edea;
  --color-gamif-diamond-to:   #fed6e3;
  --color-gamif-diamond-text: #1e293b;
}

/* ============================================================
   DARK MODE — Sobrescrita dos tokens semânticos
   Aplicado via classe .dark no <html> ou <body>
   ============================================================ */
.dark {
  /* Backgrounds — alto contraste */
  --bg-app:           #0f1117;
  --bg-card:          #1a1d27;
  --bg-card-hover:    #252838;
  --bg-sidebar:       #0d1018;
  --bg-sidebar-hover: #1e2338;
  --bg-header:        #1a1d27;
  --bg-input:         #1a1d27;
  --bg-muted:         #1e2130;
  --bg-subtle:        #161920;
  --bg-secondary:     #21242f;
  --bg-hover:         #252838;
  --bg-primary:       #1a1d27;
  --bg-overlay:       rgb(0 0 0 / 0.7);

  /* Texto — alto contraste */
  --text-primary:        #f0f2f8;
  --text-secondary:      #a8b0c8;
  --text-muted:          #6b7594;
  --text-label:          #8891aa;
  --text-disabled:       #464f6a;
  --text-inverse:        #0f1117;
  --text-sidebar:        #8891aa;
  --text-sidebar-active: #f0f2f8;

  /* Bordas */
  --border-default:  #2a2f42;
  --border-input:    #333849;
  --border-focus:    #60a5fa;
  --border-sidebar:  #1e2235;

  /* Tokens Sidebar — Dark Mode */
  --sidebar-bg:              #0d1018;
  --sidebar-text:            #8891aa;
  --sidebar-text-active:     #f0f2f8;
  --sidebar-link-active-bg:  #1e2338;
  --sidebar-border:          #1e2235;

  /* Sombras — mais pronunciadas no dark */
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}

/* ============================================================
   DETECÇÃO AUTOMÁTICA DE PREFERÊNCIA DO SISTEMA
   Aplica dark mode quando o sistema preferir e não houver
   classe .light explícita forçando o modo claro
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    /* Backgrounds — alto contraste */
    --bg-app:           #0f1117;
    --bg-card:          #1a1d27;
    --bg-card-hover:    #252838;
    --bg-sidebar:       #0d1018;
    --bg-sidebar-hover: #1e2338;
    --bg-header:        #1a1d27;
    --bg-input:         #1a1d27;
    --bg-muted:         #1e2130;
    --bg-subtle:        #161920;
    --bg-secondary:     #21242f;
    --bg-hover:         #252838;
    --bg-primary:       #1a1d27;
    --bg-overlay:       rgb(0 0 0 / 0.7);

    /* Texto — alto contraste */
    --text-primary:        #f0f2f8;
    --text-secondary:      #a8b0c8;
    --text-muted:          #6b7594;
    --text-label:          #8891aa;
    --text-disabled:       #464f6a;
    --text-inverse:        #0f1117;
    --text-sidebar:        #8891aa;
    --text-sidebar-active: #f0f2f8;

    /* Bordas */
    --border-default:  #2a2f42;
    --border-input:    #333849;
    --border-focus:    #60a5fa;
    --border-sidebar:  #1e2235;

    /* Tokens Sidebar */
    --sidebar-bg:              #0d1018;
    --sidebar-text:            #8891aa;
    --sidebar-text-active:     #f0f2f8;
    --sidebar-link-active-bg:  #1e2338;
    --sidebar-border:          #1e2235;

    /* Sombras */
    --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.4);
    --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.4);
    --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.5);
  }
}

/* ============================================================
   ESTILOS BASE — Reset e normalização
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
  background-color: var(--bg-app);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

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

svg {
  display: block;
  flex-shrink: 0;
}

a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-700);
}

button {
  cursor: pointer;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semi);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

p {
  line-height: var(--line-height-relaxed);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
}