/* ══════════════════════════════════════════════════════════════
   Health — Design System
   Primary: #52648b
   Dois temas: claro (padrão) e escuro
   ══════════════════════════════════════════════════════════════ */

/* ── Light Theme (padrão) ──────────────────────────────────── */
:root,
[data-theme="light"] {

    /* Primary */
    --primary-50:  #eef1f6;
    --primary-100: #d5dbe7;
    --primary-200: #b3bdd0;
    --primary-300: #8d9db6;
    --primary-400: #6f80a0;
    --primary-500: #52648b;
    --primary-600: #455577;
    --primary-700: #374463;
    --primary-800: #2a344d;
    --primary-900: #1c2335;

    /* Neutral */
    --neutral-50:  #f8f9fb;
    --neutral-100: #f1f3f6;
    --neutral-200: #e4e7ec;
    --neutral-300: #d1d5dc;
    --neutral-400: #a0a7b4;
    --neutral-500: #6e7787;
    --neutral-600: #4f5664;
    --neutral-700: #3a3f4b;
    --neutral-800: #262a33;
    --neutral-900: #14171d;

    /* Success */
    --success-50:  #edf7f0;
    --success-100: #d1edda;
    --success-500: #2e9e56;
    --success-600: #257f46;
    --success-700: #1c6035;

    /* Warning */
    --warning-50:  #fef8ec;
    --warning-100: #fcedc5;
    --warning-500: #d99a0a;
    --warning-600: #b07e08;
    --warning-700: #866006;

    /* Error */
    --error-50:  #fdf0f0;
    --error-100: #f9d4d4;
    --error-500: #d14343;
    --error-600: #b33636;
    --error-700: #8c2a2a;

    /* ── Semantic tokens (Light) ────────────────────────────── */

    /* Backgrounds */
    --bg-page:       var(--neutral-50);
    --bg-card:       #ffffff;
    --bg-elevated:   #ffffff;
    --bg-muted:      var(--neutral-100);
    --bg-input:      #ffffff;
    --bg-hover:      var(--neutral-100);
    --bg-active:     var(--primary-50);

    /* Text */
    --text-primary:   var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-muted:     var(--neutral-400);
    --text-inverse:   #ffffff;
    --text-link:      var(--primary-500);
    --text-link-hover:var(--primary-700);

    /* Borders */
    --border-default: var(--neutral-200);
    --border-strong:  var(--neutral-300);
    --border-focus:   var(--primary-400);
    --border-error:   var(--error-500);

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(20, 23, 29, 0.06);
    --shadow-md:  0 2px 8px rgba(20, 23, 29, 0.08), 0 1px 2px rgba(20, 23, 29, 0.04);
    --shadow-lg:  0 4px 16px rgba(20, 23, 29, 0.10), 0 2px 4px rgba(20, 23, 29, 0.04);

    /* Focus ring */
    --ring-focus: 0 0 0 3px rgba(82, 100, 139, 0.18);
    --ring-error: 0 0 0 3px rgba(209, 67, 67, 0.12);

    /* Components */
    --btn-primary-bg:       var(--primary-500);
    --btn-primary-bg-hover: var(--primary-600);
    --btn-primary-bg-active:var(--primary-700);
    --btn-primary-text:     #ffffff;

    --tab-bg:               var(--neutral-100);
    --tab-text:             var(--neutral-500);
    --tab-hover-text:       var(--neutral-700);
    --tab-active-bg:        #676767;
    --tab-active-text:      #ffffff;

    --toast-success-bg:     var(--success-50);
    --toast-success-text:   var(--success-700);
    --toast-success-border: var(--success-100);
    --toast-error-bg:       var(--error-50);
    --toast-error-text:     var(--error-700);
    --toast-error-border:   var(--error-100);

    /* Alias tokens (referenciados em componentes) */
    --bg-surface:         var(--bg-card);
    --primary:            var(--primary-500);
    --btn-primary-hover:  var(--btn-primary-bg-hover);
    --danger-500:         var(--error-500);
    --danger-50:          var(--error-50);
    --text-error:         var(--error-500);

    /* Misc */
    --overlay: rgba(20, 23, 29, 0.4);

    /* Category badges (Light) */
    --cat-neuro-bg:   #ede9fe; --cat-neuro-text:   #6d28d9;
    --cat-onco-bg:    #f0e6ff; --cat-onco-text:    #7c3aed;
    --cat-derma-bg:   #fef3c7; --cat-derma-text:   #b45309;
    --cat-nutri-bg:   #fff8e1; --cat-nutri-text:   #f57f17;
    --cat-mental-bg:  #e0f2f1; --cat-mental-text:  #00695c;
    --cat-pedia-bg:   #e3f2fd; --cat-pedia-text:   #1565c0;
    --cat-gineco-bg:  #fce4ec; --cat-gineco-text:  #c62828;
    --cat-orto-bg:    #f3e5f5; --cat-orto-text:    #7b1fa2;
    --cat-pneumo-bg:  #e8f5e9; --cat-pneumo-text:  #2e7d32;
    --cat-gastro-bg:  #fff3e0; --cat-gastro-text:  #e65100;
    --cat-nefro-bg:   #e8f5e9; --cat-nefro-text:   #1b5e20;
    --cat-cardio-bg:  var(--error-50);   --cat-cardio-text:  var(--error-600);
    --cat-endo-bg:    var(--warning-50); --cat-endo-text:    var(--warning-600);
    --cat-geral-bg:   var(--primary-50); --cat-geral-text:   var(--primary-600);
}

/* ── Dark Theme ────────────────────────────────────────────── */
[data-theme="dark"] {

    /* ── Semantic tokens (Dark) ─────────────────────────────── */

    /* Backgrounds */
    --bg-page:       #0f1117;
    --bg-card:       #1a1d27;
    --bg-elevated:   #22252f;
    --bg-muted:      #22252f;
    --bg-input:      #22252f;
    --bg-hover:      #2a2d38;
    --bg-active:     var(--primary-900);

    /* Text */
    --text-primary:   #e8eaef;
    --text-secondary: #9ba1b0;
    --text-muted:     #636979;
    --text-inverse:   var(--neutral-900);
    --text-link:      var(--primary-300);
    --text-link-hover:var(--primary-200);

    /* Borders */
    --border-default: #2a2d38;
    --border-strong:  #3a3e4a;
    --border-focus:   var(--primary-400);
    --border-error:   var(--error-500);

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);

    /* Focus ring */
    --ring-focus: 0 0 0 3px rgba(82, 100, 139, 0.35);
    --ring-error: 0 0 0 3px rgba(209, 67, 67, 0.25);

    /* Components */
    --btn-primary-bg:       var(--primary-400);
    --btn-primary-bg-hover: var(--primary-500);
    --btn-primary-bg-active:var(--primary-600);
    --btn-primary-text:     #ffffff;

    --tab-bg:               #22252f;
    --tab-text:             #636979;
    --tab-hover-text:       #9ba1b0;
    --tab-active-bg:        #9ba1b0;
    --tab-active-text:      #0f1117;

    --toast-success-bg:     #122118;
    --toast-success-text:   #6dd897;
    --toast-success-border: #1c3426;
    --toast-error-bg:       #251414;
    --toast-error-text:     #f09090;
    --toast-error-border:   #3a1c1c;

    /* Alias tokens (dark) */
    --bg-surface:         var(--bg-card);
    --primary:            var(--primary-400);
    --btn-primary-hover:  var(--btn-primary-bg-hover);
    --danger-500:         var(--error-500);
    --danger-50:          var(--error-50);
    --text-error:         var(--error-500);

    /* Misc */
    --overlay: rgba(0, 0, 0, 0.6);

    /* Category badges (Dark) */
    --cat-neuro-bg:   rgba(109,40,217,0.12);  --cat-neuro-text:   #c4b5fd;
    --cat-onco-bg:    rgba(124,58,237,0.12);   --cat-onco-text:    #a78bfa;
    --cat-derma-bg:   rgba(180,83,9,0.12);     --cat-derma-text:   #fbbf24;
    --cat-nutri-bg:   rgba(245,127,23,0.12);   --cat-nutri-text:   #ffb74d;
    --cat-mental-bg:  rgba(0,105,92,0.12);     --cat-mental-text:  #80cbc4;
    --cat-pedia-bg:   rgba(21,101,192,0.12);   --cat-pedia-text:   #90caf9;
    --cat-gineco-bg:  rgba(198,40,40,0.12);    --cat-gineco-text:  #ef9a9a;
    --cat-orto-bg:    rgba(123,31,162,0.12);   --cat-orto-text:    #ce93d8;
    --cat-pneumo-bg:  rgba(46,125,50,0.12);    --cat-pneumo-text:  #a5d6a7;
    --cat-gastro-bg:  rgba(230,81,0,0.12);     --cat-gastro-text:  #ffab91;
    --cat-nefro-bg:   rgba(27,94,32,0.12);     --cat-nefro-text:   #a5d6a7;
    --cat-cardio-bg:  rgba(209,67,67,0.12);    --cat-cardio-text:  #f09090;
    --cat-endo-bg:    rgba(217,154,10,0.12);   --cat-endo-text:    #ffb74d;
    --cat-geral-bg:   rgba(82,100,139,0.12);   --cat-geral-text:   var(--primary-300);
}

/* ── Tipografia ────────────────────────────────────────────── */
:root {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-xs:   0.75rem;
    --font-sm:   0.8125rem;
    --font-base: 0.875rem;
    --font-md:   1rem;
    --font-lg:   1.25rem;
    --font-xl:   1.5rem;
    --font-2xl:  1.875rem;
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --leading-tight:  1.3;
    --leading-normal: 1.6;
}

/* ── Espaçamento & Raio ───────────────────────────────────── */
:root {
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --radius-sm:   8px;
    --radius-md:   10px;
    --radius:      12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-full: 9999px;
    --transition: 200ms ease;
}

/* ── Transição suave entre temas ──────────────────────────── */
body,
.auth-card,
.tab,
.form-group input,
.btn-primary,
.toast {
    transition:
        background-color 300ms ease,
        color 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease;
}

/* ── Focus states globais (a11y) ─────────────────────────── */
/* Cobre todos os elementos interativos que não possuem :focus-visible próprio.
   Componentes com estilos de focus customizados (inputs, md-editor, dd-toggle)
   mantêm seus estilos — este bloco atua como fallback universal. */

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

/* Botões: usa box-shadow para respeitar border-radius */
button:focus-visible,
[role="button"]:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-icon:focus-visible,
.action-btn:focus-visible,
.share-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

/* Links de navegação */
a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Tabs */
.tab:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

/* Sidebar links */
.nav-item:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
    border-radius: var(--radius-sm);
}

/* Toggle de tema */
.theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
    border-radius: var(--radius-full);
}

/* Toolbar do markdown editor */
.md-toolbar-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
    border-radius: var(--radius-sm);
}

/* Tags removíveis */
.tag-remove:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
    border-radius: var(--radius-full);
}

/* Toggle de visibilidade da senha */
.password-toggle:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
    border-radius: var(--radius-sm);
}

/* Cards clicáveis */
.short-card:focus-visible,
.highlight-card:focus-visible,
.post-card:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}