/**
 * Projeto: RGLog CAOA
 * Arquivo: theme.css
 * Autor: Djeferson Capelli
 * Versão: 1.0.0
 * Descrição: Sistema de design — variáveis, reset, tipografia, tema dark/light
 */

/* ── Reset enxuto ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }

/* ── Tema LIGHT (padrão) ───────────────────────────────────────────────── */
:root,
html[data-theme="light"] {
  --c-bg:           #f7f8fa;
  --c-bg-elevated: #ffffff;
  --c-bg-subtle:   #f1f3f6;
  --c-bg-hover:    #eef1f5;

  --c-border:      #e3e6ec;
  --c-border-strong: #cbd1da;

  --c-text:        #0f172a;
  --c-text-muted:  #64748b;
  --c-text-soft:   #94a3b8;

  --c-accent:        #2563eb;
  --c-accent-hover:  #1d4ed8;
  --c-accent-soft:   #dbeafe;
  --c-accent-text:   #ffffff;

  --c-success:       #059669;
  --c-success-soft:  #d1fae5;
  --c-warning:       #d97706;
  --c-warning-soft:  #fef3c7;
  --c-danger:        #dc2626;
  --c-danger-soft:   #fee2e2;
  --c-info:          #0284c7;
  --c-info-soft:     #e0f2fe;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
}

/* ── Tema DARK ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --c-bg:           #0b1220;
  --c-bg-elevated: #121a2a;
  --c-bg-subtle:   #161f30;
  --c-bg-hover:    #1c2738;

  --c-border:      #1f2a3d;
  --c-border-strong: #2c3a52;

  --c-text:        #e6ecf5;
  --c-text-muted:  #93a0b6;
  --c-text-soft:   #6b7891;

  --c-accent:        #60a5fa;
  --c-accent-hover:  #3b82f6;
  --c-accent-soft:   rgba(96, 165, 250, 0.14);
  --c-accent-text:   #0b1220;

  --c-success:       #34d399;
  --c-success-soft:  rgba(52, 211, 153, 0.14);
  --c-warning:       #fbbf24;
  --c-warning-soft:  rgba(251, 191, 36, 0.14);
  --c-danger:        #f87171;
  --c-danger-soft:   rgba(248, 113, 113, 0.14);
  --c-info:          #38bdf8;
  --c-info-soft:     rgba(56, 189, 248, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.20);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.50);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
  background-color: var(--c-bg);
  color: var(--c-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p { color: var(--c-text); }
.text-muted { color: var(--c-text-muted); }
.text-soft  { color: var(--c-text-soft); }
.text-small { font-size: 13px; }

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

/* ── Container & grid utility ──────────────────────────────────────────── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.stack-2 > * + * { margin-top: 0.5rem; }
.stack-4 > * + * { margin-top: 1rem; }
.stack-6 > * + * { margin-top: 1.5rem; }

/* ── Acessibilidade ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Retina tweaks ─────────────────────────────────────────────────────── */
@media (min-resolution: 2dppx) {
  body { -webkit-font-smoothing: subpixel-antialiased; }
}

/* ── Loading overlay global ─────────────────────────────────────────────── */
.rg-loading {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  z-index: 9999;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: rg-fade-in 0.15s ease;
}
.rg-loading[data-on="true"] { display: flex; }
.rg-loading-spinner {
  width: 48px; height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rg-spin 0.7s linear infinite;
}
.rg-loading-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
@keyframes rg-spin { to { transform: rotate(360deg); } }
@keyframes rg-fade-in { from { opacity: 0; } to { opacity: 1; } }
html[data-theme="dark"] .rg-loading {
  background: rgba(0, 0, 0, 0.55);
}