/* ============================================================================
   Luz Estelar OS — Theme (Light)
   ============================================================================
   Single source of truth pra design tokens, base reset, typography, components
   e layout primitives.

   Import order recomendado nas pages:
     <link rel="stylesheet" href="/styles/theme.css">

   Convenções:
   - Cores em variáveis CSS (--bg, --text, --brand etc.)
   - Spacing scale 4px-based
   - Radii: 4 / 8 / 12 / 16
   - Sombras suaves (light theme não usa neon glow)
   ============================================================================ */

/* ----- Design tokens --------------------------------------------------------- */
:root {
  /* Brand */
  --brand:          #192470;          /* navy — links, active states */
  --brand-soft:     #4468B7;          /* sky blue */
  --accent:         #FEB449;          /* gold — CTAs, highlights */
  --accent-deep:    #D4AF37;
  --cream:          #F8F3EA;

  /* Backgrounds */
  --bg:             #FAFAFA;          /* app background */
  --bg-soft:        #F5F5F5;          /* alt rows, hover */
  --bg-cream:       #FAF6EE;          /* warm panels */
  --surface:        #FFFFFF;          /* cards, sidebar, modal */
  --surface-2:      #FBFBFB;          /* inset, subtle layer */

  /* Borders */
  --border:         #E5E5E5;
  --border-soft:    #F0F0F0;
  --border-strong:  #D1D5DB;

  /* Text */
  --text:           #1A1A1A;          /* primary content */
  --text-soft:      #4A5165;          /* secondary */
  --text-mute:      #6B7280;          /* tertiary, captions */
  --text-faint:     #9CA3AF;          /* placeholders, disabled */
  --text-inverse:   #FFFFFF;
  --text-brand:     var(--brand);
  --text-link:      var(--brand);

  /* Feedback */
  --success:        #16A34A;
  --success-bg:     #DCFCE7;
  --warning:        #F59E0B;
  --warning-bg:     #FEF3C7;
  --danger:         #DC2626;
  --danger-bg:      #FEE2E2;
  --info:           #2563EB;
  --info-bg:        #DBEAFE;

  /* Shadows */
  --shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:         0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:      0 4px 6px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.03);
  --shadow-lg:      0 10px 15px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.04);
  --shadow-xl:      0 20px 25px rgba(15, 23, 42, 0.08), 0 10px 10px rgba(15, 23, 42, 0.04);

  /* Spacing (4px scale) */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;
  --space-10:       40px;
  --space-12:       48px;
  --space-16:       64px;

  /* Radii */
  --radius-sm:      4px;
  --radius:         8px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-full:    9999px;

  /* Typography */
  --font-body:      'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading:   'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-mono:      ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --text-xs:        12px;
  --text-sm:        13px;
  --text-base:      15px;
  --text-lg:        17px;
  --text-xl:        20px;
  --text-2xl:       24px;
  --text-3xl:       30px;
  --text-4xl:       36px;

  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-base:   1.55;
  --leading-loose:  1.75;

  /* Layout */
  --sidebar-w:      252px;
  --sidebar-w-collapsed: 64px;
  --header-h:       56px;
  --container-max:  1280px;

  /* Z-index scale */
  --z-base:         1;
  --z-sticky:       100;
  --z-dropdown:     500;
  --z-modal:        1000;
  --z-toast:        1500;

  /* Transitions */
  --t-fast:         120ms ease;
  --t-base:         200ms ease;
  --t-slow:         300ms ease;
}

/* Dark mode hook (preparado pra futuro, não ativo agora) */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    /* TODO: dark theme variables */
  }
}

/* ----- Base reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
::selection { background: var(--accent); color: var(--brand); }

/* ----- Typography ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { margin: 0; }
small, .text-sm { font-size: var(--text-sm); color: var(--text-soft); }
.text-mute  { color: var(--text-mute); }
.text-soft  { color: var(--text-soft); }
.text-faint { color: var(--text-faint); }
.text-brand { color: var(--brand); }
.text-accent { color: var(--accent-deep); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-soft);
  color: var(--brand);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}
pre {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  padding: var(--space-4);
  border-radius: var(--radius);
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; padding: 0; color: var(--text); }
a {
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
a:hover { border-bottom-color: var(--text-link); }

/* ----- Layout primitives ---------------------------------------------------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-8); }
.row { display: flex; gap: var(--space-3); align-items: center; }
.row-wrap { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.col { display: flex; flex-direction: column; gap: var(--space-3); }
.grow { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }

/* ----- App shell (sidebar + main) ------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}
.app-sidebar  { grid-area: sidebar; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; position: sticky; top: 0; height: 100vh; }
.app-header   { grid-area: header;  background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-sticky); }
.app-main     { grid-area: main;    overflow-y: auto; }
.app-main-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

/* Sidebar internal */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
}
.sidebar-brand img { width: 28px; height: auto; }
.sidebar-nav { padding: var(--space-3) var(--space-3); }
.sidebar-group { margin-top: var(--space-5); }
.sidebar-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  font-weight: 600;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--text-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  border-bottom: 0;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-item:hover { background: var(--bg-soft); color: var(--text); border-bottom: 0; }
.sidebar-item.active { background: var(--brand); color: var(--text-inverse); }
.sidebar-item .icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; }

/* Header internal */
.app-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
}
.app-header-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
}
.app-header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

/* ----- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 8px 14px;
  font-size: var(--text-sm); font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
}
.btn:hover { border-bottom: 1px solid transparent; }
.btn-primary    { background: var(--brand); color: var(--text-inverse); border-color: var(--brand); }
.btn-primary:hover { background: #0F1856; }
.btn-accent     { background: var(--accent); color: var(--brand); border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-deep); }
.btn-ghost      { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.btn-danger     { background: var(--danger); color: var(--text-inverse); border-color: var(--danger); }
.btn-sm         { padding: 5px 10px; font-size: var(--text-xs); }
.btn-lg         { padding: 12px 22px; font-size: var(--text-base); }
.btn[disabled]  { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ----- Cards / Surfaces ----------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card-tight { padding: var(--space-4); }
.card-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-3); }
.card-subtitle { color: var(--text-soft); font-size: var(--text-sm); margin-bottom: var(--space-4); }

/* ----- Inputs / Forms ------------------------------------------------------- */
.input, .textarea, .select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: var(--text-sm);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: 0;
  border-color: var(--brand-soft);
  box-shadow: 0 0 0 3px rgba(68, 104, 183, 0.12);
}
.textarea { resize: vertical; font-family: var(--font-mono); line-height: 1.55; }
.label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ----- Badges / Pills ------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: var(--text-xs); font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--bg-soft); color: var(--text-soft);
  border: 1px solid var(--border-soft);
}
.badge-success { background: var(--success-bg); color: var(--success); border-color: transparent; }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: transparent; }
.badge-info    { background: var(--info-bg);    color: var(--info);    border-color: transparent; }
.badge-accent  { background: #FFF4DB;           color: var(--accent-deep); border-color: transparent; }

/* ----- Tables --------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border-soft); }
.table th { background: var(--bg-soft); font-weight: 600; color: var(--text-soft); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.04em; }
.table tr:hover td { background: var(--bg-soft); }

/* ----- Markdown content (renderer alvo) ------------------------------------ */
.md-content { line-height: var(--leading-loose); color: var(--text); max-width: 760px; }
.md-content h1, .md-content h2, .md-content h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.md-content h1:first-child { margin-top: 0; }
.md-content p { margin: var(--space-3) 0; }
.md-content ul, .md-content ol { margin: var(--space-3) 0; padding-left: var(--space-6); }
.md-content li + li { margin-top: 4px; }
.md-content blockquote {
  border-left: 3px solid var(--accent);
  padding: var(--space-1) var(--space-4);
  margin: var(--space-4) 0;
  background: var(--bg-cream);
  color: var(--text-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.md-content table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--text-sm); }
.md-content table th, .md-content table td { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); text-align: left; }
.md-content table th { background: var(--bg-soft); font-weight: 600; }
.md-content img { border-radius: var(--radius); margin: var(--space-4) 0; box-shadow: var(--shadow-sm); }

/* ----- Utilities ------------------------------------------------------------ */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.full-bleed { width: 100%; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ----- Responsive: sidebar vira drawer no mobile --------------------------- */
@media (max-width: 880px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas:
      "header"
      "main";
  }
  .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 80vw;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform var(--t-base);
    z-index: var(--z-modal);
    box-shadow: var(--shadow-xl);
  }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: calc(var(--z-modal) - 1);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-base);
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  .app-header-burger { display: inline-flex !important; }
}
.app-header-burger { display: none; background: transparent; border: 0; padding: 6px; border-radius: var(--radius); cursor: pointer; color: var(--text); }
.app-header-burger:hover { background: var(--bg-soft); }

/* ----- Focus visible (acessibilidade) -------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand-soft);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================================
   Acabou — theme.css
   ============================================================================ */