/* Boa Semente — tokens únicos (fonte: design_handoff_boa_semente/boa-semente-tokens.css + complemento do painel)
   Os padrões claros também estão em backend/layout-tokens.js (tela Aparência) — mantenha os dois iguais.
    para site e painel (padrão 2a: Serifa + botões em pílula).
   Nomes compatíveis com painel-v2.css / backend/layout-tokens.js, para a tela Aparência continuar funcionando.
   Uso: carregar ANTES de style.css e painel-v2.css. Tema escuro: <html data-theme="escuro"> (painel)
   ou html[data-site-theme="escuro"] (site; Louvor/Coral sempre escuro). */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

:root {
  /* Tipografia */
  --font-heading: "Source Serif 4", Georgia, serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family: var(--font-body);           /* alias do painel */
  --heading-weight: 600;
  --heading-tracking: -0.01em;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 16px;
  --fs-h5: 18px; --fs-h4: 22px; --fs-h3: 26px; --fs-h2: 30px; --fs-h1: 44px; --fs-display: 56px;
  --fs-h1-mobile: 34px;

  /* Forma */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --btn-radius: 999px;
  --rule: 2px;                               /* régua forte entre seções */

  /* Espaço */
  --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-14: 56px;
  --gutter: 16px;
  --tap: 44px;                               /* alvo de toque mínimo no site; painel aceita 40px */

  /* Fundo e texto */
  --page-bg: #F7F4EC;
  --surface-bg: #FFFDF8;
  --surface-hover: #EFF3E4;
  --text: #2A2620;
  --text-muted: #6B655A;
  --heading: #1A5C2A;
  --heading-green: #1A5C2A;
  --border: #E3DDCF;
  --border-strong: #C8952A;

  /* Cor principal e destaques */
  --primary: #2D7A3A;
  --primary-hover: #236E35;
  --on-primary: #FFFFFF;
  --primary-soft-bg: #E6F0E2;
  --accent-gold: #C8952A;
  --accent-text: #8F6316;                    /* dourado legível para texto */
  --accent-soft-bg: #F6EAD0;
  --accent-light: #D4E8A0;
  --ghost-border: #C8952A;                   /* borda do botão "Ver todos" */

  /* Estados */
  --success: #2D7A3A;  --success-bg: #E3EEDF; --success-text: #1A5C2A; --success-border: #BFD8B8;
  --warning: #C8952A;  --warning-bg: #F8EBCF; --warning-text: #7A520C; --warning-border: #EBD09A;
  --danger: #B3261E;   --danger-hover: #8E1C16; --danger-bg: #F8E3E1; --danger-soft-bg: #F8E3E1; --danger-text: #B3261E; --danger-border: #EBB9B5;
  --muted-bg: #EEE9DE;

  /* Badges de permissão */
  --badge-master-bg: #1A5C2A; --badge-master-text: #FFFDF8;
  --badge-admin-bg: #F6EAD0;  --badge-admin-text: #8F6316;
  --badge-editor-bg: #EEE9DE; --badge-editor-text: #2A2620;
  --badge-leitura-bg: #E3EEDF; --badge-leitura-text: #1A5C2A;

  /* Barra superior e painel esquerdo */
  --topbar-bg: #FFFDF8;
  --topbar-text: #1A5C2A;
  --sidebar-bg: #123F1D;
  --sidebar-text: #CFE3C9;
  --sidebar-active-bg: #2D7A3A;
  --sidebar-active-bar: #E2C27A;
  --sidebar-hover: rgba(255,255,255,0.08);
  --sidebar-brand-accent: #E2C27A;
  --logo-plate: #F7F4EC;                     /* selo creme atrás do logo em fundo escuro */

  /* Formulários */
  --input-bg: #FFFFFF;
  --input-border: #D6CFBE;
  --input-focus-border: #2D7A3A;
  --input-focus-ring: #E6F0E2;
  --label-color: #4A453C;

  /* Botões */
  --btn-fs: 14px;
  --btn-fw: 600;
  --btn-h: 40px;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--border-strong);
  --btn-secondary-text: var(--text);
  --btn-secondary-hover: var(--surface-hover);
  --btn-press: translateY(1px);              /* efeito ao clicar, igual para todos */

  /* Hero, rodapé, login */
  --hero-bg: #1A5C2A;
  --hero-text: #FFFDF8;
  --hero-muted: #CFE3C9;
  --hero-accent: #E2C27A;
  --hero-btn-bg: #FFFDF8;
  --hero-btn-text: #1A5C2A;
  --hero-btn-hover: #EFF3E4;
  --footer-bg: #123F1D;
  --footer-text: #CFE3C9;
  --login-bg-start: #123F1D;                 /* sem gradiente: start = end */
  --login-bg-end: #123F1D;
  --login-card-bg: #FFFDF8;

  /* Editor (Quill) */
  --editor-bg: #FFFFFF;
  --editor-border: var(--input-border);
  --editor-toolbar-bg: #F7F4EC;
  --editor-text: var(--text);

  /* Toast */
  --toast-bg: #1A2A1E; --toast-text: #F4F1E8; --toast-icon: #8FD19B;

  /* Elevação */
  --shadow: 0 1px 2px rgba(42,38,32,.10);
  --shadow-md: 0 3px 10px rgba(42,38,32,.12);
  --shadow-lg: 0 12px 32px rgba(42,38,32,.18);
  --overlay: rgba(10,20,12,.55);

  /* Aliases do site antigo (style.css) — remover quando o CSS for migrado */
  --green-dark: var(--heading);
  --green-mid: var(--primary);
  --green-light: #4A9A5A;
  --olive-light: var(--accent-light);
  --gold: var(--accent-gold);
  --amber: var(--accent-gold);
  --gray-bg: var(--page-bg);
  --gray-light: var(--border);
  --gray-mid: var(--text-muted);
  --text-dark: var(--text);
  --text-mid: var(--text);
  --font: var(--font-body);
  --white: #FFFDF8;                          /* alias antigo; a etapa 3 troca os usos por tokens semânticos */
  /* ── Complemento do painel (nomes de layout-tokens.js que o handoff não define) ── */
  --font-family-headings: var(--font-heading);
  --line-height: 1.55;
  --fs-2xs: 11px;
  --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 26px; --fs-4xl: 30px; --fs-5xl: 28px;
  --fs-display-sm: 34px; --fs-display-md: 44px; --fs-display-lg: 56px;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --topbar-border: var(--border-strong);
  --sidebar-text-strong: #FFFDF8;
  --sidebar-muted: #8FB596;
  --sidebar-hover-bg: var(--sidebar-hover);
  --sidebar-active-text: #FFFDF8;
  --sidebar-border: rgba(255,255,255,0.10);
  --sidebar-avatar-bg: #E2C27A;
  --sidebar-avatar-text: #123F1D;
  --surface-alt-bg: var(--page-bg);
  --primary-text: var(--on-primary);
  --primary-light: #4A9A5A;
  --primary-soft-text: var(--heading-green);
  --focus-ring: var(--input-focus-ring);
  --success-hover: var(--primary-hover);
  --badge-muted-bg: var(--muted-bg);
  --row-inactive-bg: var(--muted-bg);
  --overlay-bg: var(--overlay);
  --input-text: var(--text);
  --input-placeholder: var(--text-muted);
  --input-fs: 14px;
  --input-h: 40px;
  --editor-font-family: var(--font-body);
  --editor-fs: 16px;
  --editor-line-height: 1.7;
  --editor-toolbar-border: var(--border);
  --editor-topbar-bg: var(--sidebar-bg);
  --editor-topbar-text: #FFFDF8;
  --editor-quote-border: var(--accent-gold);
  --editor-quote-text: var(--text-muted);
  --editor-link: var(--primary);
  --login-logo: var(--primary);
  --login-title: var(--heading);
  --welcome-bg: var(--hero-bg);
  --welcome-text: var(--hero-text);
  --icon-set: "material-outlined";
  --icon-size: 20px;
  --site-cabecalho-tema: "automatico";
  --content-max: 1200px;
  --media-bg: #0B0F0C;                       /* fundo de vídeos/miniaturas enquanto carregam */
  --on-accent: #1A1200;                      /* texto sobre o dourado */
  --on-dark: #FFFDF8;                        /* texto sobre fundo escuro fixo (vídeo, selo) */
  --brand-whatsapp: #25D366;
  --brand-facebook: #1877F2;
}
html[data-theme="escuro"],
html[data-site-theme="escuro"] {
  --page-bg: #0E1A12;
  --surface-bg: #16261B;
  --surface-hover: #1D3223;
  --text: #E6E9E3;
  --text-muted: #9DA79E;
  --heading: #E2C27A;
  --heading-green: #8FD19B;
  --border: #24382A;
  --border-strong: #8A6A2A;

  --primary: #5FA86C;
  --primary-hover: #72BB7E;
  --on-primary: #0B140D;
  --primary-soft-bg: #1E3324;
  --accent-gold: #E2C27A;
  --accent-text: #E2C27A;
  --accent-soft-bg: #33291A;
  --ghost-border: var(--accent-text);

  --success: #5FA86C;  --success-bg: #1E3324; --success-text: #8FD19B; --success-border: #2E4A35;
  --warning: #E2C27A;  --warning-bg: #3A2D14; --warning-text: #F0C36A; --warning-border: #5A4520;
  --danger: #C93A3F;   --danger-hover: #E0545A; --danger-bg: #3A1C1C; --danger-soft-bg: #3A1C1C; --danger-text: #FF8A85; --danger-border: #5A2A2A;
  --muted-bg: #222B24;

  --badge-master-bg: #8FD19B; --badge-master-text: #0B150E;
  --badge-admin-bg: #33291A;  --badge-admin-text: #E2C27A;
  --badge-editor-bg: #222B24; --badge-editor-text: #E6E9E3;
  --badge-leitura-bg: #1E3324; --badge-leitura-text: #8FD19B;

  --topbar-bg: #0B150E;
  --topbar-text: #E2C27A;
  --sidebar-bg: #07100A;
  --sidebar-text: #A9B5AA;
  --sidebar-active-bg: #1D3223;
  --sidebar-hover: rgba(255,255,255,0.06);

  --input-bg: #121A14;
  --input-border: #34413A;
  --input-focus-border: #5FA86C;
  --input-focus-ring: #1E3324;
  --label-color: #C3CCC3;

  --hero-bg: #0B150E;
  --hero-text: #F1EBDA;
  --hero-muted: #A9B5AA;
  --hero-btn-bg: #E2C27A;
  --hero-btn-text: #0B150E;
  --hero-btn-hover: #EDD49A;
  --footer-bg: #07100A;
  --footer-text: #A9B5AA;
  --login-bg-start: #07100A;
  --login-bg-end: #07100A;
  --login-card-bg: #16261B;

  --editor-bg: #121A14;
  --editor-toolbar-bg: #16261B;

  --toast-bg: #F1EBDA; --toast-text: #1A2A1E; --toast-icon: #2D7A3A;

  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 3px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  /* complemento do painel */
  --sidebar-muted: #7E8F82;
  --sidebar-text-strong: #F1EBDA;
  --sidebar-active-text: #F1EBDA;
  --sidebar-border: rgba(255,255,255,0.07);
  --sidebar-avatar-bg: #E2C27A;
  --sidebar-avatar-text: #0B150E;
  --primary-light: #72BB7E;
  --editor-topbar-bg: #07100A;
}

/* Base mínima */
body { background: var(--page-bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.55; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); color: var(--heading); }
a { color: var(--primary); } a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: var(--primary-soft-bg); }
button, .btn { white-space: nowrap; }
.btn:active, button:active { transform: var(--btn-press); }
.tabs-header { overflow-x: auto; overflow-y: hidden; }
.stat-value { white-space: nowrap; font-variant-numeric: tabular-nums; }