/* =====================================================================
   base.css — Fundamentos visuais
   ---------------------------------------------------------------------
   Aqui ficam:
     1. Variáveis de design (cores, espaçamentos, raios, fontes).
        Para mudar o visual do app inteiro, ajuste APENAS estas variáveis.
     2. Reset mínimo e estilos globais de tipografia.
   Layout fica em layout.css; peças reutilizáveis em components.css.
   ===================================================================== */

:root {
  /* --- Cores (tema escuro: melhor para avaliar estampas e contraste) --- */
  --color-bg:            #0f1115;
  --color-surface:       #171a21;
  --color-surface-2:     #1e222b;
  --color-border:        #2a2f3a;
  --color-text:          #e7e9ee;
  --color-text-muted:    #8b93a3;
  --color-accent:        #ff5a36;   /* laranja "tinta" */
  --color-accent-hover:  #ff7352;
  --color-accent-soft:   rgba(255, 90, 54, 0.12);
  --color-danger:        #ef4444;
  --color-success:       #22c55e;

  /* Xadrez claro exibido atrás do canvas (revela transparência do PNG) */
  --checker-light-a: #ffffff;
  --checker-light-b: #d6d6d6;

  /* --- Espaçamentos --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* --- Bordas e sombras --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* --- Tipografia --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- Dimensões fixas do layout --- */
  --header-height:  60px;
  --status-height:  32px;
  --sidebar-width:  320px;

  --transition: 150ms ease;
}

/* ---------- Reset mínimo ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

/* O atributo [hidden] sempre vence, mesmo com display definido em outra regra */
[hidden] {
  display: none !important;
}

/* Ícones SVG em linha herdam a cor do texto */
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}