/* ============================================================================
   BHUB Design Tokens — "Social Behavioral Sciences & Human Services" palette
     #58272D burgundy  ·  #A3A16E sage olive  ·  #F0EEBD cream
     #A48C68 warm tan   ·  #F4F0F1 off-white (paper)

   Variable NAMES are kept identical to the previous (teal) token set so that
   article-card.css, article-detail.css, etc. keep resolving — only the VALUES
   pivot to the warm burgundy brand. Fonts: Reddit Sans (UI) · Georgia (serif,
   article headline) · Chivo Mono (mono) · Elms Sans (data/metrics).
   ============================================================================ */
:root {
  /* ============================================
     CORES PRIMÁRIAS — Escala Burgundy (#58272D é a marca)
     ============================================ */
  --color-primary-50:  #fbf3f4;
  --color-primary-100: #f4dedf;
  --color-primary-200: #e6b9bc;
  --color-primary-300: #ce8c91;
  --color-primary-400: #a85961;
  --color-primary-500: #7e3640;
  --color-primary-600: #58272d;  /* ★ MARCA — botões, links, CTAs */
  --color-primary-700: #4a1f24;  /* hover */
  --color-primary-800: #3a181c;
  --color-primary-900: #2a1115;  /* headings / active */

  /* Sage / olive — acento secundário (barras de Relevância, links em dark) */
  --color-sage-50:  #f5f4e6;
  --color-sage-100: #ebe9c9;
  --color-sage-200: #d9d6a0;
  --color-sage-300: #c0bd84;
  --color-sage-400: #a3a16e;  /* ★ acento secundário */
  --color-sage-500: #8b8956;
  --color-sage-600: #6f6d40;
  --color-sage-700: #54532f;

  /* Cream — fundos suaves (hero, citação do abstract). Nunca em texto. */
  --color-cream-50:  #fdfce8;
  --color-cream-100: #f8f6d4;
  --color-cream-200: #f0eebd;  /* ★ pastel */
  --color-cream-300: #e6e2a3;
  --color-cream-400: #d4ce80;

  /* Tan / camel — tom de terra de apoio (ornamentos, contornos secundários) */
  --color-tan-50:  #faf6ef;
  --color-tan-100: #f0e6d2;
  --color-tan-200: #ddc9a5;
  --color-tan-300: #c5a87a;
  --color-tan-400: #a48c68;  /* ★ tan */
  --color-tan-500: #876f4f;
  --color-tan-600: #6a563c;

  /* Off-white — superfície da página */
  --color-paper:      #f4f0f1;  /* ★ canvas */
  --color-paper-soft: #efe9ea;

  /* Legacy: verde pastel da paleta antiga → agora cream */
  --color-accent-light: #f8f6d4;
  --color-accent-light-hover: #f0eebd;

  /* ============================================
     SEMÂNTICAS — feedback afinado à paleta quente
     ============================================ */
  --color-success-50:  #f4f7e8;
  --color-success-100: #e6edcc;
  --color-success-500: #74894a;
  --color-success-600: #5c6d3a;
  --color-success-700: #475630;

  --color-warning-50:  #fdf6e3;
  --color-warning-100: #f8ebc4;
  --color-warning-500: #c79434;
  --color-warning-600: #a07527;
  --color-warning-700: #7c5a1d;

  --color-error-50:    #fbebec;
  --color-error-100:   #f5d2d5;
  --color-error-500:   #b34a52;
  --color-error-600:   #8c343b;
  --color-error-700:   #6e272d;

  --color-info-50:     #eef2ef;
  --color-info-100:    #d7e0db;
  --color-info-500:    #5a7f72;
  --color-info-600:    #456256;
  --color-info-700:    #354d44;

  /* ============================================
     CORES NEUTRAS — Warm stone (substitui o slate frio)
     ============================================ */
  --color-neutral-50:  #fafaf9;
  --color-neutral-100: #f5f5f4;
  --color-neutral-200: #e7e5e4;
  --color-neutral-300: #d6d3d1;
  --color-neutral-400: #a8a29e;
  --color-neutral-500: #78716c;
  --color-neutral-600: #57534e;
  --color-neutral-700: #44403c;
  --color-neutral-800: #292524;
  --color-neutral-900: #1c1917;

  /* ============================================
     CATEGORIAS — chips soft-tint (fundo claro + texto saturado + borda)
     ============================================ */
  --cat-clinica-bg:        #f4dedf;  --cat-clinica-fg:        #58272d;  --cat-clinica-bd:        #e6b9bc;
  --cat-pesquisa-bg:       #ebe9c9;  --cat-pesquisa-fg:       #54532f;  --cat-pesquisa-bd:       #d9d6a0;
  --cat-educacao-bg:       #f0e6d2;  --cat-educacao-fg:       #6a563c;  --cat-educacao-bd:       #ddc9a5;
  --cat-organizacional-bg: #f4e1d1;  --cat-organizacional-fg: #87481f;  --cat-organizacional-bd: #e8c4a3;
  --cat-autismo-bg:        #f5dde2;  --cat-autismo-fg:        #7e3640;  --cat-autismo-bd:        #e8b9c2;
  --cat-behaviorismo-bg:   #ebe6df;  --cat-behaviorismo-fg:   #4a3d2f;  --cat-behaviorismo-bd:   #d6cbb9;
  --cat-verbal-bg:         #e6e9d0;  --cat-verbal-fg:         #4d5e2e;  --cat-verbal-bd:         #c9d0a4;
  --cat-noticias-bg:       #f4e1d1;  --cat-noticias-fg:       #87481f;  --cat-noticias-bd:       #e8c4a3;
  --cat-outros-bg:         #ebe8e4;  --cat-outros-fg:         #57534e;  --cat-outros-bd:         #d6d3d1;

  /* ============================================
     SEMÂNTICAS (Modo Claro)
     ============================================ */
  --color-bg-primary:   #ffffff;   /* cards, navbar, painéis */
  --color-bg-secondary: #f0eebd;   /* cream — blocos tintados suaves */
  --color-bg-tertiary:  #fafaf9;   /* superfícies aninhadas */
  --color-bg-hover:     #fbf3f4;   /* lavagem burgundy de hover */

  --color-text-primary:   #2a1115;  /* burgundy mais escuro — headings */
  --color-text-secondary: #58272d;  /* burgundy da marca — texto profundo */
  --color-text-tertiary:  #57534e;  /* stone-600 — corpo */
  --color-text-muted:     #78716c;  /* stone-500 — captions */

  --color-border-light:  #e7e5e4;   /* stone-200 */
  --color-border-medium: #d6d3d1;   /* stone-300 */
  --color-border-dark:   #58272d;   /* burgundy — ênfase */
  --color-border-accent: #a3a16e;   /* sage — foco/hover */

  /* ============================================
     TIPOGRAFIA
     ============================================ */
  --font-sans:  "Reddit Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-mono:  "Chivo Mono", "Fira Code", "Cascadia Mono", ui-monospace, Menlo, monospace;
  --font-data:  "Elms Sans", "Reddit Sans", "Inter", system-ui, sans-serif;

  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.25;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

  /* ============================================
     ESPAÇAMENTO
     ============================================ */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ============================================
     BORDAS E RADIUS
     ============================================ */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ============================================
     SOMBRAS — tingidas com burgundy primary-900
     ============================================ */
  --shadow-sm: 0 1px 2px 0 rgba(42, 17, 21, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(42, 17, 21, 0.10), 0 2px 4px -1px rgba(42, 17, 21, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(42, 17, 21, 0.10), 0 4px 6px -2px rgba(42, 17, 21, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(42, 17, 21, 0.10), 0 10px 10px -5px rgba(42, 17, 21, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(42, 17, 21, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(42, 17, 21, 0.06);
  --shadow-card-hover: 0 4px 14px rgba(88, 39, 45, 0.10); /* lift burgundy */

  /* ============================================
     TRANSIÇÕES
     ============================================ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-all: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   MODO ESCURO — quente (burgundy + stone profundo), não frio
   ============================================================================ */
[data-theme="dark"] {
  --color-bg-primary:   #292524;   /* stone-800 */
  --color-bg-secondary: #4a1f24;   /* burgundy tint profundo */
  --color-bg-tertiary:  #1c1917;   /* stone-900 */
  --color-bg-hover:     #3a181c;

  --color-text-primary:   #f4f0f1;  /* paper */
  --color-text-secondary: #f0eebd;  /* cream */
  --color-text-tertiary:  #d6d3d1;  /* stone-300 */
  --color-text-muted:     #a8a29e;  /* stone-400 */

  --color-border-light:  #44403c;
  --color-border-medium: #57534e;
  --color-border-dark:   #a3a16e;
  --color-border-accent: #a3a16e;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.50), 0 2px 4px -1px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -2px rgba(0, 0, 0, 0.30);
}