/*
 * theme.css — Sistema de temas do Norma.
 *
 * Paleta exata do guia visual Norma.
 * Luz por padrão. Dark como biblioteca noturna — não como IDE.
 */

/* ══════════════════════════════════════════════════════════
   CONSTANTES — iguais em ambos os temas
   ══════════════════════════════════════════════════════════ */
:root {
  /* Tipografia */
  --font:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', 'Cascadia Code', 'Consolas', 'Fira Code', monospace;

  /* Escala tipográfica */
  --fs-hero:    clamp(2.2rem, 3.8vw, 3.8rem);
  --fs-section: clamp(1.4rem, 2vw, 2.1rem);
  --fs-card:    1.15rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-meta:    0.85rem;

  /* Radius — guia: small 8, medium 12, large 14 */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  14px;
  --r-xl:  18px;
  /* aliases legados */
  --radius:    8px;
  --radius-lg: 12px;

  /* Sombras — guia: soft 0 4px 14px rgba(31,36,48,0.04) */
  --shadow-soft: 0 4px 14px rgba(31,36,48,0.04);
  --shadow-md:   0 8px 24px rgba(31,36,48,0.05);
  --shadow-doc:  0 12px 36px rgba(31,36,48,0.08);

  /* Transições */
  --tr-fast: 160ms ease;
  --tr-base: 200ms ease;
}

/* ══════════════════════════════════════════════════════════
   TEMA CLARO — papel quente, identidade principal
   Paleta exata do guia visual Norma.
   ══════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  /* Fundos */
  --bg:        #F6F3EC;   /* papel claro, levemente quente */
  --surface:   #FBFAF7;   /* áreas de trabalho e painéis */
  --surface-2: #F1EEE7;   /* blocos de apoio, sidebar, cards secundários */
  --surface-3: #E8E3D8;   /* áreas destacadas */

  /* Texto */
  --text:    #1F2430;   /* grafite azulado */
  --muted:   #5C6470;   /* texto secundário */
  --muted-2: #7A8088;   /* texto discreto — guia: #7A8088 */

  /* Bordas exatas do guia */
  --border:        #D9D2C7;
  --border-strong: #CFC6B8;
  --divider:       rgba(31,36,48,0.08);

  /* Primária — azul acadêmico */
  --primary:       #2F4F6B;
  --primary-hover: #253f57;
  --primary-dim:   rgba(47,79,107,0.08);

  /* Secundária — bronze/papiro */
  --secondary:     #7B6748;
  --secondary-dim: rgba(123,103,72,0.08);

  /* Destaque — dourado seco */
  --highlight:     #A0834D;
  --highlight-dim: rgba(160,131,77,0.09);

  /* Semânticas — valores exatos do guia */
  --success:      #58725B;
  --success-bg:   rgba(88,114,91,0.10);
  --success-text: #3a5440;

  --warning:      #8C6B3F;
  --warning-bg:   rgba(140,107,63,0.10);
  --warning-text: #6b4e2a;

  --danger:       #8B4E4E;
  --danger-bg:    rgba(139,78,78,0.09);
  --danger-text:  #6a3535;

  --info:         #2F4F6B;
  --info-bg:      rgba(47,79,107,0.09);
  --info-text:    #1e3347;

  /* Sombras no claro */
  --shadow:     rgba(31,36,48,0.08);

  /* Focus */
  --focus:      rgba(47,79,107,0.22);

  /* Preview canvas */
  --canvas:     #DDD8CE;
  --ring-track: #D9D2C7;

  /* Editor — sempre escuro */
  --editor-bg:     #1e2130;
  --editor-border: rgba(47,79,107,0.30);
}

/* ══════════════════════════════════════════════════════════
   TEMA ESCURO — biblioteca noturna, não IDE
   Tons de tinta envelhecida, não neon.
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Fundos — grafite quente, não preto puro */
  --bg:        #171A20;
  --surface:   #1E2128;
  --surface-2: #252930;
  --surface-3: #2C3038;

  /* Texto */
  --text:    rgba(240,237,228,0.92);  /* papel invertido */
  --muted:   rgba(240,237,228,0.56);
  --muted-2: rgba(240,237,228,0.34);

  /* Bordas */
  --border:        rgba(240,237,228,0.08);
  --border-strong: rgba(240,237,228,0.15);
  --divider:       rgba(240,237,228,0.06);

  /* Primária — azul acadêmico suavizado */
  --primary:       #6B9AB8;
  --primary-hover: #7AAACA;
  --primary-dim:   rgba(107,154,184,0.13);

  /* Secundária */
  --secondary:     #A09070;
  --secondary-dim: rgba(160,144,112,0.12);

  /* Destaque */
  --highlight:     #C4A870;
  --highlight-dim: rgba(196,168,112,0.12);

  /* Semânticas */
  --success:      #7EA882;
  --success-bg:   rgba(88,114,91,0.18);
  --success-text: #a8c8ab;

  --warning:      #C49860;
  --warning-bg:   rgba(140,107,63,0.18);
  --warning-text: #d8be8a;

  --danger:       #C08080;
  --danger-bg:    rgba(139,78,78,0.18);
  --danger-text:  #d8a8a8;

  --info:         #6B9AB8;
  --info-bg:      rgba(107,154,184,0.14);
  --info-text:    #9ec4d8;

  /* Sombras */
  --shadow:     rgba(0,0,0,0.50);

  /* Focus */
  --focus:      rgba(107,154,184,0.35);

  /* Preview canvas */
  --canvas:     #111318;
  --ring-track: #2C3038;

  /* Editor */
  --editor-bg:     #14161C;
  --editor-border: rgba(107,154,184,0.20);
}

/* ══════════════════════════════════════════════════════════
   TRANSIÇÃO SUAVE — exceto editor e SVG
   ══════════════════════════════════════════════════════════ */
body, body *, body *::before, body *::after {
  transition:
    background-color var(--tr-base),
    border-color     var(--tr-base),
    color            var(--tr-fast),
    box-shadow       var(--tr-base);
}

#editor-ta, #editor-mirror, #editor-wrap, svg * {
  transition: none !important;
}